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

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网关，从而在我的DynamoDB中产生了一个新项目。

Answer 1

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

HTTP与HTTPS

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

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

“承载者TOKEN_VALUE”

Answer 2

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

1）使用OPTIONS方法

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

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

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}", {...}