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

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 mình từ trình duyệt mà không hoàn nguyên về JSON-P?

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);
};

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 của bạn - và thì đấy!

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 (máy chủ hoặc phản hồi 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.

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 nơi 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ẽ rõ ràng, nhưng nó làm tôi bối rối trong nửa ngày.

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(); }
});

Đố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 sử dụng bởi trình duyệt như một biện pháp thận trọ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

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;
};

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 trong trình đơn thả xuống> Triển khai API (triển khai lại nó)

Nó đã làm việc !

Tôi bắt đầu làm việc sau khi tôi nhận ra rằng tác giả lambda đang 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 vào 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.

Đố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 phải vấn đề 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.

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.

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

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'"
#...

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.

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 trắng 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 đề.

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 đề.

Trong trường hợp của tôi, tôi chỉ đơn giản là viết sai URL yêu cầu tìm nạp. Bật serverless.yml, bạn đặt corsthành true:

register-downloadable-client:
    handler: fetch-downloadable-client-data/register.register
    events:
      - http:
          path: register-downloadable-client
          method: post
          integration: lambda
          cors: true
          stage: ${self:custom.stage}

và sau đó trên trình xử lý lambda, bạn gửi tiêu đề, nhưng nếu bạn thực hiện sai yêu cầu tìm nạp trên giao diện người dùng, bạn sẽ không nhận được tiêu đề đó trong phản hồi và bạn sẽ gặp lỗi này. Vì vậy, hãy kiểm tra kỹ URL yêu cầu của bạn ở mặt trước.

Trong Python, bạn có thể làm điều đó như trong đoạn mã dưới đây:

{ "statusCode" : 200,
'headers': 
    {'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': "*"
     },
"body": json.dumps(
    {
    "temperature" : tempArray,
    "time": timeArray
    })
 }