为 Lambda 函数启用 CORS 后被 Chrome 中的 CORS 策略阻止？ [关闭]答案

【问题标题】：Blocked by CORS policy in Chrome after enabling CORS for Lambda Function? [closed]为 Lambda 函数启用 CORS 后被 Chrome 中的 CORS 策略阻止？ [关闭]
【发布时间】：2020-02-19 01:08:54
【问题描述】：

我已在控制台中为 these instructions 之后的 Lambda 函数启用了 CORS。

API 也是一个快速服务器，可为所有方法启用 CORS：

// Enable CORS for all methods
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")
  next()
});

但是浏览器仍然阻止请求，因为它没有收到Access-Control-Allow-Origin 标头。这是完整的消息：

home:1 从源 'http://localhost:4200' 访问 XMLHttpRequest 在 'https://szxjza7hz5.execute-api.us-east-1.amazonaws.com/loco/myendpoint' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow-Origin ' 请求的资源上存在标头。

我们如何解决这个问题？

说明中的测试方法提供如下 curl 命令：

curl -v -X OPTIONS -H "Access-Control-Request-Method: POST" -H "Origin: http://localhost:4200" https://szxjza7hz5.execute-api.us-east-1.amazonaws.com/loco

但是由于缺少身份验证令牌而失败：

* Connection state changed (MAX_CONCURRENT_STREAMS updated)!
< HTTP/2 403 
< content-type: application/json
< content-length: 42
< date: Wed, 19 Feb 2020 01:45:47 GMT
< x-amzn-requestid: a529894d-19ff-4c95-915b-45c4098d30ea
< x-amzn-errortype: MissingAuthenticationTokenException
< x-amz-apigw-id: IHvz3Fp_IAMF43g=
< x-cache: Error from cloudfront
< via: 1.1 58e86c1faaee1b15c90e95d794e240dd.cloudfront.net (CloudFront)
< x-amz-cf-pop: ORD51-C3
< x-amz-cf-id: jyTAo6OUrhUWWVNOSdk6M0384K515YzE0V9Vgg-WhfXXkLDzLofr9Q==
< 
* Connection #0 to host szxjza7hz5.execute-api.us-east-1.amazonaws.com left intact
{"message":"Missing Authentication Token"}

【问题讨论】：

标签： javascript amazon-web-services rest cors aws-amplify

【解决方案1】：

尝试将这些字段添加到响应头：

const response = {
    headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Credentials" : true,
    },
    body: "...",
    statusCode: 200
}

如果在更新后不重新部署 API，您也可能会遇到同样的错误。尝试如下重新部署：

【讨论】：

我认为问题可能在于Amplify push 没有更新我添加和正在测试的新端点。我在这里问了另一个问题：stackoverflow.com/questions/60292679/…
我刚刚接受了这个答案，因为它是一个很好的答案。在我的笔记中添加一个额外的答案。

【解决方案2】：

我在运行 API 更新时犯了一个错误。我想如果我在 express 服务器上添加另一个端点 amplify push 会选择它并部署它。

我们需要运行amplify update API 来创建一个新的端点。因此，当我对我认为存在的端点进行 API 调用时，它没有通过预检检查，因为没有端点......

【讨论】：

"我们需要运行放大更新 API 以创建新的端点。"=> 我遇到了同样的问题，我运行了 "amplify update api" 命令但我遇到了同样的问题。我不确定“创建新端点”是什么意思。就我而言，端点是相同的，只是在内部进行了更改。
@AjitGoel 你找到解决方案了吗？我有完全相同的问题，我的端点没有改变，但现在我得到了 CORS 错误
@VikG，我能够通过更新 lambda 函数和\或重新创建指向同一函数的新 api 来解决该问题。