API Gateway CORS: không có tiêu đề 'Access-Control-Allow-Origin'

103
Tyler 2016-02-04 14:51.

Mặc dù CORS đã được thiết lập thông qua API Gateway và Access-Control-Allow-Origintiêu đề được đặt, tôi vẫn gặp lỗi sau khi cố gắng gọi API từ AJAX trong Chrome:

XMLHttpRequest không thể tải http://XXXXX.execute-api.us-west-2.amazonaws.com/beta/YYYYY . Không có tiêu đề 'Access-Control-Allow-Origin' có trên tài nguyên được yêu cầu. Nguồn gốc 'null' do đó không được phép truy cập. Phản hồi có mã trạng thái HTTP 403.

Tôi đã cố gắng NHẬN URL thông qua Postman và nó cho thấy tiêu đề trên đã được chuyển thành công:

Và từ OPTIONS phản hồi:

Làm cách nào để gọi API của tôi từ trình duyệt mà không hoàn nguyên về JSON-P?

16 answers

121
riseres 2017-03-27 02:56.

Tôi có một vấn đề tương tự. Tôi đã sử dụng 10hrs để tìm hiểu.

https://serverless.com/framework/docs/providers/aws/events/apigateway/

// handler.js

'use strict';

module.exports.hello = function(event, context, callback) {

const response = {
  statusCode: 200,
  headers: {
    "Access-Control-Allow-Origin" : "*", // Required for CORS support to work
    "Access-Control-Allow-Credentials" : true // Required for cookies, authorization headers with HTTPS 
  },
  body: JSON.stringify({ "message": "Hello World!" })
};

callback(null, response);
};
105
Gabriel Doty 2018-02-19 20:46.

Nếu bất kỳ ai khác vẫn gặp phải vấn đề này - tôi đã có thể tìm ra nguyên nhân gốc rễ trong ứng dụng của mình.

Nếu bạn đang chạy API-Gateway với Ủy quyền tùy chỉnh - API-Gateway sẽ gửi lại 401 hoặc 403 trước khi nó thực sự truy cập vào máy chủ của bạn. Theo mặc định - API-Gateway KHÔNG được định cấu hình cho CORS khi trả về 4xx từ trình ủy quyền tùy chỉnh.

Ngoài ra - nếu bạn tình cờ nhận được mã trạng thái của 0hoặc 1từ một yêu cầu chạy qua API Gateway, đây có thể là vấn đề của bạn.

Để khắc phục - trong cấu hình API Gateway - hãy chuyển đến "Gateway Responses", mở rộng "Default 4XX" và thêm tiêu đề cấu hình CORS vào đó. I E

Access-Control-Allow-Origin: '*'

Đảm bảo triển khai lại cổng kết nối của bạn - và thì đấy!

19
Carlos Alberto Schneider 2017-04-07 10:12.

1) Tôi cần thực hiện tương tự như @riseres và một số thay đổi khác. Đây là tiêu đề phản hồi của tôi:

headers: {
            'Access-Control-Allow-Origin' : '*',
            'Access-Control-Allow-Headers':'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
            'Access-Control-Allow-Credentials' : true,
            'Content-Type': 'application/json'
        }

2 và

Theo tài liệu này:

http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

Khi bạn sử dụng proxy cho các hàm lambda trên cấu hình API Gateway, các phương thức post hoặc get không có tiêu đề được thêm vào, chỉ có các tùy chọn. Bạn phải thực hiện thủ công trong phản hồi (phản hồi máy chủ hoặc lambda).

3) Và

Bên cạnh đó, tôi cần tắt tùy chọn 'Yêu cầu khóa API' trong phương pháp đăng cổng API của mình.

16
lase 2018-12-04 08:22.

Nếu bạn đã thử mọi thứ liên quan đến vấn đề này mà không có kết quả, bạn sẽ kết thúc như tôi đã làm. Hóa ra, các hướng dẫn thiết lập CORS hiện có của Amazon hoạt động tốt ... chỉ cần đảm bảo bạn nhớ triển khai lại ! Trình hướng dẫn chỉnh sửa CORS, ngay cả với tất cả các dấu kiểm màu xanh lá cây nhỏ xinh, không thực hiện cập nhật trực tiếp cho API của bạn. Có lẽ là điều hiển nhiên, nhưng nó khiến tôi bối rối trong nửa ngày.

12
MannyC 2017-04-18 00:24.

Mẫu của tôi đang hoạt động: Tôi vừa chèn 'Access-Control-Allow-Origin': '*', bên trong tiêu đề: {} trong hàm nodejs Lambda đã tạo. Tôi không thực hiện thay đổi nào đối với lớp API do Lambda tạo.

Đây là NodeJS của tôi:

'use strict';
const doc = require('dynamodb-doc');
const dynamo = new doc.DynamoDB();
exports.handler = ( event, context, callback ) => {
    const done = ( err, res ) => callback( null, {
        statusCode: err ? '400' : '200',
        body: err ? err.message : JSON.stringify(res),
        headers:{ 'Access-Control-Allow-Origin' : '*' },
    });
    switch( event.httpMethod ) {
        ...
    }
};

Đây là cuộc gọi AJAX của tôi

$.ajax({
    url: 'https://x.execute-api.x-x-x.amazonaws.com/prod/fnXx?TableName=x',
    type: 'GET',
    beforeSend: function(){ $( '#loader' ).show();},
    success: function( res ) { alert( JSON.stringify(res) ); },
    error:function(e){ alert('Lambda returned error\n\n' + e.responseText); },
    complete:function(){ $('#loader').hide(); }
});
8
theaws.blog 2019-11-28 18:27.

Đối với nhân viên Google:

Đây là lý do tại sao:

  • Yêu cầu đơn giản hoặc GET/ POSTkhông có cookie không kích hoạt preflight
  • Khi bạn định cấu hình CORS cho một đường dẫn, API Gateway sẽ chỉ tạo một OPTIONSphương thức cho đường dẫn đó, sau đó gửi Allow-Origintiêu đề bằng cách sử dụng phản hồi giả khi người dùng gọi OPTIONS, nhưng GET/ POSTsẽ không Allow-Origintự động nhận
  • Nếu bạn cố gắng gửi các yêu cầu đơn giản khi bật chế độ CORS, bạn sẽ gặp lỗi vì phản hồi đó không có Allow-Origintiêu đề
  • Bạn có thể tuân thủ thực tiễn tốt nhất, các yêu cầu đơn giản không có nghĩa là gửi phản hồi cho người dùng, gửi xác thực / cookie cùng với các yêu cầu của bạn để làm cho nó "không đơn giản" và preflight sẽ kích hoạt
  • Tuy nhiên, bạn sẽ phải tự mình gửi tiêu đề CORS cho yêu cầu sau OPTIONS

Tóm lại:

  • OPTIONSAPI Gateway chỉ vô hại sẽ được tạo tự động
  • OPTIONSchỉ được trình duyệt sử dụng như một biện pháp đề phòng để kiểm tra khả năng xuất hiện CORS trên đường dẫn
  • Việc CORS có được chấp nhận hay không phụ thuộc vào phương pháp thực tế, ví dụ GET/POST
  • Bạn phải gửi thủ công các tiêu đề thích hợp trong phản hồi của mình
6
Vishal Shetty 2020-04-26 23:23.

Tôi vừa thêm tiêu đề vào phản hồi hàm lambda của mình và nó hoạt động như một sự quyến rũ

exports.handler = async (event) => {
    const response = {
        statusCode: 200,
        body: JSON.stringify('Hey it works'),
        headers:{ 'Access-Control-Allow-Origin' : '*' }
    };
    return response;
};
4
Ravi Ram 2019-06-08 08:53.

Tôi đã tìm thấy một giải pháp đơn giản trong

API Gateway> Chọn điểm cuối API của bạn> Chọn phương pháp (trong trường hợp của tôi, đó là BÀI ĐĂNG)

Bây giờ có một trình đơn thả xuống ACTIONS> Enable CORS .. hãy chọn nó.

Bây giờ hãy chọn lại ACTIONS thả xuống> Triển khai API (triển khai lại nó)

Nó đã làm việc !

3
RodP 2018-07-16 05:46.

Tôi bắt đầu làm việc sau khi tôi nhận ra rằng tác giả lambda bị lỗi và vì một số lý do không xác định đã được dịch thành lỗi CORS. Một bản sửa lỗi đơn giản cho tác giả của tôi (và một số bài kiểm tra tác giả mà tôi lẽ ra phải thêm ngay từ đầu) và nó đã hoạt động. Đối với tôi, hành động API Gateway 'Bật CORS' là bắt buộc. Điều này đã thêm tất cả các tiêu đề và các cài đặt khác mà tôi cần trong API của mình.

3
Jason 2020-07-14 15:34.

Đối với tôi, câu trả lời CUỐI CÙNG CÓ TÁC DỤNG, là nhận xét của James Shapiro từ câu trả lời của Alex R (được ủng hộ nhiều thứ hai). Tôi đã gặp sự cố API Gateway này ngay từ đầu, bằng cách cố gắng lấy một trang web tĩnh được lưu trữ trong S3 để sử dụng lambda để xử lý trang liên hệ với chúng tôi và gửi email. Chỉ cần kiểm tra [] Mặc định 4XX đã khắc phục được thông báo lỗi.

2
Ankit Kumar Rajpoot 2020-01-03 23:13.

Sau khi thay đổi chức năng hoặc mã của bạn Làm theo hai bước sau.

Đầu tiên Kích hoạt CORS Sau đó Triển khai API mọi lúc.

2
Ziaur Rahman 2020-01-14 02:19.

Triển khai mã sau khi bật CORS cho cả hai POSTOPTIONShiệu quả với tôi.

1
James L. 2018-12-07 14:34.

Tôi đang chạy aws-serverless-expressvà trong trường hợp của tôi cần phải chỉnh sửa simple-proxy-api.yaml.

Trước khi CORS được định cấu hình https://example.com, tôi chỉ cần hoán đổi tên trang web của mình và triển khai lại qua npm run setup, và nó cập nhật lambda / stack hiện có của tôi.

#...
/:
#...
method.response.header.Access-Control-Allow-Origin: "'https://example.com'"
#...
/{proxy+}:
method.response.header.Access-Control-Allow-Origin: "'https://example.com'"
#...
1
CamHart 2019-04-21 23:31.

Trong trường hợp của tôi, vì tôi đang sử dụng AWS_IAM làm phương thức Cấp phép cho API Gateway, tôi cần cấp quyền cho vai trò IAM của mình để đạt được điểm cuối.

0
Michael Seibt 2019-05-17 23:59.

Một nguyên nhân gốc rễ khác của vấn đề này có thể là sự khác biệt giữa HTTP / 1.1 và HTTP / 2.

Dấu hiệu: Một số người dùng, không phải tất cả, đã báo cáo gặp lỗi CORS khi sử dụng Phần mềm của chúng tôi.

Vấn đề: Các Access-Control-Allow-Origintiêu đề đã mất tích đôi khi .

Bối cảnh: Chúng tôi đã có một Lambda tại chỗ, chuyên xử lý OPTIONSyêu cầu và trả lời với các tiêu đề CORS tương ứng, chẳng hạn như Access-Control-Allow-Originkhớp với một danh sách cho phép Origin.

Giải pháp: API Gateway dường như chuyển đổi tất cả các tiêu đề thành chữ thường cho các cuộc gọi HTTP / 2, nhưng vẫn duy trì cách viết hoa cho HTTP / 1.1. Điều này khiến việc truy cập event.headers.originkhông thành công.

Kiểm tra xem bạn có đang gặp sự cố này không:

Giả sử API của bạn được đặt tại https://api.example.comvà giao diện người dùng của bạn ở https://www.example.com. Sử dụng CURL, đưa ra yêu cầu bằng HTTP / 2:

curl -v -X OPTIONS -H 'Origin: https://www.example.com' https://api.example.com

Đầu ra phản hồi phải bao gồm tiêu đề:

< Access-Control-Allow-Origin: https://www.example.com

Lặp lại bước tương tự bằng cách sử dụng HTTP / 1.1 (hoặc với Origintiêu đề chữ thường ):

curl -v -X OPTIONS --http1.1 -H 'Origin: https://www.example.com' https://api.example.com

Nếu Access-Control-Allow-Origintiêu đề bị thiếu, bạn có thể muốn kiểm tra phân biệt chữ hoa chữ thường khi đọc Origintiêu đề.

0
Nigel Atkinson 2019-10-30 16:25.

Ngoài nhận xét của những người khác, điều cần chú ý là trạng thái được trả về từ tích hợp cơ bản của bạn và liệu tiêu đề Access-Control-Allow-Origin có được trả về cho trạng thái đó hay không.

Thực hiện điều 'Bật CORS' chỉ thiết lập trạng thái 200. Nếu bạn có những người khác trên điểm cuối, ví dụ: 4xx và 5xx, bạn cần tự thêm tiêu đề.

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Đây là Tổng thống Trump đe dọa 'trợ cấp' xe điện của GM vì đóng cửa nhà máy

Đây là Tổng thống Trump đe dọa 'trợ cấp' xe điện của GM vì đóng cửa nhà máy

Trump và Giám đốc điều hành GM Mary Barra vào năm 2017. Kể từ khi tin tức nổ ra ngày hôm qua rằng General Motors đang cắt giảm việc làm ở Bắc Mỹ để chuẩn bị cho tương lai điện / xe tự hành / khủng khiếp có thể xảy ra của chúng tôi, gần như tất cả mọi người đã tự hỏi: Tổng thống Trump, người đã vận động tranh cử trên một nền tảng sẽ như thế nào của việc mang lại và duy trì việc làm ô tô của Mỹ, phải nói gì về điều này? Bây giờ chúng ta biết.

Bản vá lỗi tiếp theo của Fallout 76 sẽ mang lại một số bản sửa lỗi cần thiết

Bản vá lỗi tiếp theo của Fallout 76 sẽ mang lại một số bản sửa lỗi cần thiết

Bethesda cho biết ngày hôm nay trên Reddit, Fallout 76 sẽ có một bản vá lớn khác vào ngày 4 tháng 12, sẽ bắt đầu cố gắng khắc phục một số vấn đề lớn hơn của trò chơi. Ngoài ra, công ty cho biết họ có kế hoạch giao tiếp nhiều hơn trong tương lai về những gì nhóm Fallout 76 đang làm việc và khi nào các bản cập nhật mới cho trò chơi sẽ ra mắt.

Mạng lưới bệnh viện Công giáo sẽ không cho phép nhân viên phá thai tại phòng khám ngoài giờ làm việc

Mạng lưới bệnh viện Công giáo sẽ không cho phép nhân viên phá thai tại phòng khám ngoài giờ làm việc

Bạn có biết rằng một trong sáu bệnh nhân ở bệnh viện ở Hoa Kỳ được điều trị tại một cơ sở Công giáo? Và bạn có biết rằng quyền sở hữu của Công giáo hạn chế sâu sắc việc thiết lập các thủ tục y tế có thể được thực hiện trong các bệnh viện này, rõ ràng nhất là khi nói đến chăm sóc sức khỏe sinh sản? Bây giờ NPR báo cáo rằng sự gia tăng của các bệnh viện thuộc Công giáo đang gây khó khăn hơn cho các bác sĩ — những người bị cấm bởi các quy định do Hoa Kỳ viết.

Khói từ đám cháy rừng ở California đã đến tận thành phố New York

Khói từ đám cháy rừng ở California đã đến tận thành phố New York

Đường chân trời San Francisco bị che khuất bởi khói và khói mù do cháy rừng phía sau Đảo Alcatraz, Thứ Tư, ngày 14 tháng 11 năm 2018, ở San Francisco.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language