CORS 显示错误，但应用程序仍然有效

Question

我有一个简单的 html 表单，我使用 api-gateway 和 lambda 从中获取数据并将其发送到我的电子邮件。当我点击表单的提交按钮时，我收到了电子邮件，一切都如预期的那样。

但是 chrome 给了我这个错误：

Access to XMLHttpRequest at 'https://*********.execute-api.us-east-1.amazonaws.com/*******' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

jquery.min.js:2 POST https://*********.execute-api.us-east-1.amazonaws.com/******* net::ERR_FAILED 200

为什么会发生这种情况，我该如何阻止它。

在 api-gateway 中启用了 CORS。 我的 javascript 看起来像这样：

var data = {
   myData: myData,
   moreData: moreData,
};
        
$.ajax({
   type: "POST",
   url : "https://*********.execute-api.us-east-1.amazonaws.com/*******",
   dataType: "json",
   crossDomain: "true",
   contentType: "application/json; charset=utf-8",
   data: JSON.stringify(data),
        
    success: function () {
        alert("it worked");
          form.reset()
    },
    error: function () {
        alert("did not work");
    }
});

Lambda 看起来像这样

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: [
                'myemail@email.com'
            ]
        },
        Message: {
            Body: {
                Text: {
                    Data: 'mydata: ' + event.myData +  '\n moreData: ' + event.moreData,
                    Charset: 'UTF-8'
                }
            },
            Subject: {
                Data: 'subject of my email',
                Charset: 'UTF-8'
            }
        },
        Source: 'myemail@email.com'
    };
    ses.sendEmail(params, done);
}

就像我上面提到的，这有效，我收到了电子邮件，但浏览器仍然显示错误

Answer 1

服务器必须以Access-Control-Allow-Origin: *（通配符）或Access-Control-Allow-Origin: domain-name 进行响应，这将在请求标头中作为来源：域名提供。

exports.handler = function (event, context) {
    const response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "https://www.example.com",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        },
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

Answer 2

在您的应用程序中，无论您在哪里定义或使用了 CORS，都需要添加

Access-Control-Allow-Origin：“https://**.execute-api.us-east-1.amazonaws.com/”

如果需要请参考此链接https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Answer 3

由于没有使用 Lambda 代理集成，因此在 lambda 中给出响应是没有意义的，在这种情况下处理响应的是 api-gateway。

在 API-Gateway 控制台上单击按钮以启用 CORS 似乎允许 API 执行 CORS 操作，“应用程序正常工作”，但它没有在响应标题“浏览器给出该错误”中添加任何内容。

我必须手动进入每个方法并放入 Access-Control-Allow-Origin 标头。