Question

这似乎已经被问了一百万遍了，但是我尝试将其前端（React）和后端（带有Node.js的Lambda）添加进去：

Access-Control-Allow-Headers
Access-Control-Request-Headers
Access-Control-Allow-Methods: 'GET,PUT,POST,DELETE,PATCH,OPTIONS'

但是我仍然收到此错误：

Access to XMLHttpRequest at 'https://<API-INVOKE-URL>/prod/notes' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

这是我的Lambda代码来处理响应：

function buildOutput(statusCode, data) {
    let _response = {
        statusCode: statusCode,
        headers: {
            "Access-Control-Allow-Origin": "*"
        },
        body: JSON.stringify(data)
    };
    return _response;
};

这是我的React代码，用于发送POST请求：

createNote(note) {
        return API.post("notes", "/notes", {
            headers: {
                "Authorization": this.state.token,
                "Access-Control-Allow-Origin": "*"
            },
            body: {
                userid: this.state.username,
                noteid: 'new',
                content: 'from frontend'
            }
        });

我已经从控制台测试了Lambda函数，并且该函数可以正常工作（可以对DynamoDB进行CRUD）。
我已经为我的API网关资源打开了CORS并部署了API。
我尝试将PostMan与：

Headers:Content/Type: application/json
Authorization: <MY_TOKEN>
*With and without* Access-Control-Allow-Origin: *

并且有效：请求已成功从PostMan发送到API Gateway，从而在我的DynamoDB中产生了一个新项目。

Answer 1

CORS需要客户端和服务器之间的直接连接。您的浏览器可能出于安全原因阻止了连接。

HTTP与HTTPS

我还会尝试在您的浏览器上启用下载。

我相信您还应该将承载添加到授权标头中的令牌中，例如：

“承载者TOKEN_VALUE”

Answer 2

实际上在标头中添加一些数据会将POST请求转换为OPTIONS。这样，它将触发请求：

1）使用OPTIONS方法

2）获得对OPTIONS请求的成功响应后，将发生实际的API调用。

要处理CORS，您应该在后端使用this。

Answer 3

只是想弄清楚这个问题。某些浏览器会对终端进行“预检”检查。这意味着在进行您期望的POST方法调用之前，将使用OPTIONS方法调用端点。在AWS中，转到API Gateway并创建一个新资源，选中“创建选项”选项，这将创建您需要添加到端点的默认响应标头。

Answer 4

谢谢你们。 我已对您的答案/建议进行了投票。我确信他们在大多数情况下都会有所帮助。我已经弄清楚为什么会出现这个错误。

我的坏：我有两种资源：

/notes/ (method: any)
/notes/{noteid} (method: any)

，并且Invoke URL实际上是AWS API Gateway中的<path>/notes/{noteid}（字符串中包含{}）。我以为是/notes/:noteid

因此前端代码应如下所示：

return API.post("notes", "/notes/{noteid}", {...}

AWS API Gateway返回飞行前响应中Access-Control-Allow-Headers不允许的access-control-allow-origin

4 个答案: