AWS API Gateway 和 S3 上的 CORS

Question

我正在调用一个使用 lambda 函数的 AWS API。 我从托管在 S3（静态网络托管）中的 HTML 页面调用它。 在调用 API 时，我收到 CORS 错误：

CORS 策略已阻止从源 '' 访问 XMLHttpRequest：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我在 API 上启用 CORS，在 S3 存储桶上指定 CORS 后尝试过它，但它不起作用。 似乎，我错过了要指定 CORS 标头的正确位置。

附加信息：我在 chrome 开发者工具中得到以下信息

**Response Headers**
content-length: 42
content-type: application/json
date: Mon, 24 Feb 2020 04:28:51 GMT
status: 403
x-amz-apigw-id: IYmYgFQvoAMFy6Q=
x-amzn-errortype: MissingAuthenticationTokenException
x-amzn-requestid: 79b18379-383d-4ddb-a061-77f55b5727c3

**Request Headers**
authority: apiid-api.us-east-1.amazonaws.com
method: POST
path: /Prod
scheme: https
accept: application/json, text/javascript, */*; q=0.01
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9,hi;q=0.8
access-control-allow-headers: Origin, X-Requested-With, Content-Type, Accept, Authorization
access-control-allow-methods: GET, OPTIONS
access-control-allow-origin: https://apiid.execute-api.us-east-1.amazonaws.com/Prod
content-length: 117
content-type: application/json; charset=UTF-8
origin: http://example.com
referer: http://example.com/
sec-fetch-mode: cors
sec-fetch-site: cross-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

Lambda 函数代码：

var AWS = require('aws-sdk');
var ses = new AWS.SES();

var RECEIVER = 'example@gmail.com';
var SENDER = 'example@gmail.com';

var response = {
 "isBase64Encoded": false,
 "headers": { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'},
 "statusCode": 200,
 "body": "{\"result\": \"Success.\"}"
 };

exports.handler = function (event, context) {
    console.log('Received event:', event);
    sendEmail(event, function (err, data) {
        context.done(err, null);
    });
};

function sendEmail (event, done) {
    var params = {
        Destination: {
            ToAddresses: [
                RECEIVER
            ]
        },
        Message: {
            Body: {
                Text: {
                    Data: 'name: ' + event.name + '\nphone: ' + event.phone + '\nemail: ' + event.email + '\ndesc: ' + event.desc,
                    Charset: 'UTF-8'
                }
            },
            Subject: {
                Data: 'Website Referral Form: ' + event.name,
                Charset: 'UTF-8'
            }
        },
        Source: SENDER
    };
    ses.sendEmail(params, done);
}

Answer 1

请求的资源上不存在“Access-Control-Allow-Origin”标头。

这表示您请求的资源，即您通过 API 网关的 Lambda，未在其响应中返回Access-Control-Allow-Origin标头； 浏览器期望来自 API 的响应中包含 CORS 标头（可能是因为 OPTIONS 请求），但响应中没有这些标头。

您没有这么具体说，但我假设您在 API 网关上使用 Lambda 代理集成。 要解决您的问题，请将Access-Control-Allow-Origin: *标头添加到您的 Lambda 返回的响应中。 您尚未指定 Lambda 的编写语言，或提供您的 Lambda 代码，但如果它是在 NodeJS 中，您将返回的代码片段可能如下所示：

    const result = {
        statusCode: 200,
        headers: {
            'Access-Control-Allow-Origin': '*',
            // other required headers
        },
        body: object_you_are_returning
    };

    return result;

Answer 2

非常令人惊讶的是，原因似乎是“客户端不应该有 'Access-Control-Allow-Origin': '*'。 显然，这应该只出现在 Lambda 代码中，将它添加到 jQuery 代码中会由于某种原因导致预检失败。” https://github.com/serverless/serverless/issues/4037#issuecomment-320434887

评论后补充信息：

我还尝试使用 S3 中托管的 ajax 通过 API Gateway 调用我的 Lambda 函数。 我尝试了很多建议，尤其是这个解决方案（ http://stackoverflow.com/a/52683640/13530447 ），但没有一个对我有用。 在 Chrome 的开发人员模式下，我一直看到错误"Access to XMLHttpRequest at '[my API]' from origin '[my S3 website]' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response." 我通过在 ajax 中删除'Access-Control-Allow-Origin': '*'解决了这个问题。 仍然以解决方案（ http://stackoverflow.com/a/52683640/13530447 ）为例，它会通过改变来工作

$.ajax(
{
    url: 'https://npvkf9jnqb.execute-api.us-east-1.amazonaws.com/v1',
    headers: {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'
},
    crossDomain: true,
    type:'GET',
    dataType: 'text',
    success: function(data)
    {
        window.alert(data);
    }
}); 

进入

$.ajax(
{
    url: 'https://npvkf9jnqb.execute-api.us-east-1.amazonaws.com/v1',
    headers: {'Content-Type': 'application/json'},
    crossDomain: true,
    type:'GET',
    dataType: 'text',
    success: function(data)
    {
        window.alert(data);
    }
});