放大：即使在 API 网关和 Lambda 标头中启用了 CORS，但 CORS 标头“Access-Control-Allow-Origin”缺失错误

Question

我正在使用 Amplify，并让我的 API 网关代理到 Lambda。我在 /{proxy+} 上启用了 CORS 并部署了 API。在我的 Lambda 函数中，我在我的普通函数中设置了适当的标头：

import json


def handler(event, context):
    print("received event:")
    print(event)
    return {
        "statusCode": 200,
        "headers": {
            "Access-Control-Allow-Credentials": True,
            "Access-Control-Allow-Headers": "Content-Type",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET",
            "Access-Control-Allow-Origin": "*",
        },
        "body": json.dumps(event),
    }

此 Lambda 函数位于通过 Cognito 进行身份验证的 API Gateway 资源后面。

当我使用 Amplify 调用我的 API 时：

let myInit = {
          headers: {
            Authorization: `Bearer ${(await Auth.currentSession())
              .getIdToken()
              .getJwtToken()}`
          }
        }; 

API.get("adminapi", "/admin", myInit) ...

我的GET 请求中缺少可怕的 CORS 标头“Access-Control-Allow-Origin”：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://xxxxxxxxxx.execute-api.us-east-1.amazonaws.com/dev/admin. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

我看到它在OPTIONS 请求中返回：

我什至在 Postman 中进行了测试以验证标头是否会返回：

我在这里做错了什么？调用似乎没有通过 API 网关。我想知道它是否与身份验证有关。当我使用我的 IAM 凭证从 Postman 进行测试时，它可以正常工作，但是从我的 Web 应用程序使用不记名令牌时，它会像上面一样失败。

Answer 1

我假设您忘记处理用于 preflight request 的 OPTIONS 动词并在那里返回标题。

您正在发送一个Authorization 标头，它不在"simple" requests 的允许标头列表中，因此preflighted request 已完成。

此外，为了credentials to get through，您必须确保也设置了Access-Control-Allow-Credentials: true 标头。

从代码 sn-p 中看不出您的请求正文是什么内容类型，但如果不是application/x-www-form-urlencoded、multipart/form-data 或text/plain（比如application/json），您还需要将其列入白名单Content-Type 标头使用Access-Control-Allow-Headers: Content-Type。

Answer 2

我遇到了同样的问题。我的飞行前OPTIONS 请求具有所有正确的标头：

access-control-allow-headers: Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-Amz-User-Agent
access-control-allow-methods: DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT
access-control-allow-origin: *

所以我添加后浏览器开始接受请求

access-control-allow-origin: *

对我想使用的实际方法的请求的响应（非预检，例如：GET、POST等方法）

Answer 3

当我从我的 API Gateway OPTIONS 端点中删除 Cognito 身份验证时，在 js 中使用 fetch() 时，它起作用了。 Chrome 和 Firefox 不会将 Authorize 标头发送到 OPTIONS。不过，放大可能会有所不同。引用：https://fetch.spec.whatwg.org/#http-responses...

"For a CORS-preflight request, request’s credentials mode is always "same-origin", i.e., it excludes credentials, but for any subsequent CORS requests it might not be."

Answer 4

我刚刚遇到过类似的事情。这里的问题询问为什么浏览器在使用 Amplify 访问 API 网关时返回 CORS 错误，尽管在端点中正确配置了 CORS 标头。

除了不正确的 CORS 标头配置之外，如果请求的某些方面不正确，Amplify/API Gateway 会给出 CORS 错误。我遇到的有：

• 您使用的 HTTP 谓词不存在于端点上
• 您使用的端点不存在（例如拼写错误）
• Content-Type 标头不正确

后者给我带来了问题。似乎Amplify.API.post 和Amplify.API.put 默认都发送application/x-www-form-urlencoded 的Content-Type。我的 API 期待 application/json，结果是 CORS 错误。

Answer 5

在我使用 Amplify 并尝试保护 API 网关，使其只有通过 Cognito 登录的用户才能访问时，我遇到了同样的问题。

您可能也错过了我错过的步骤是 AWS API-Gateway 中的一些配置。您需要转到网关仪表板并创建一个使用您的 Cognito 用户池的“授权者”。 token source 将是您为此使用的任何标题标签（通常是“授权”）。

但你还没有完成。然后，您需要转到“资源”并更改方法请求以使用您刚刚创建的新授权方。

希望在做完这一切之后，你应该会没事的。如果您的用户已登录，并且您按原样添加 Authorization 标头：

let myInit = {
          headers: {
            Authorization: `Bearer ${(await Auth.currentSession())
              .getIdToken()
              .getJwtToken()}`
          }
        };

希望一切顺利。

可以在here on Youtube, and starting around 10:50上找到显示这些步骤的视频指南