AWS API Gateway 和 S3 上的 CORS

Question

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

在 '' 从源访问 XMLHttpRequest '' 已被 CORS 策略阻止：否 请求中存在“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 中，您将返回的 sn-p 可能类似于：

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