使用Lambda，API Gateway和Cloudfront时，尽管在Lambda响应中指定了“ Access-Control-Allow-Origin”，但CORS错误

Question

我有一个已部署的Web应用程序，它由在S3上托管的React＆Redux前端以及在AWS Lambda上托管并通过API网关公开的几个后端微服务构建而成，这些微服务已与Serverless一起部署。 该站点还通过CloudFront CDN分发。

微服务与多个外部服务交互，但是我关心的主要服务是get-products服务，该服务查询Stripe产品数据库并将产品从那里返回到我的React应用程序。

直到昨天，当我在前端部署了一些新的（基本上是修饰性的）更改，并向Stripe数据库添加了更多SKU时，该站点一直运行良好。 自添加这些更改以来，我开始遇到以前没有的CORS错误。

最初我遇到以下错误：

Access to XMLHttpRequest at 'https://XXXXXXXXXX.execute-api.eu-west-1.amazonaws.com/dev/products' from origin 'https://www.superfunwebsite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

尽管我的Lambda响应包括以下标头，但这仍然是：

'Access-Control-Allow-Origin': '*',

此时，我将Lambdas响应标头更新为以下内容：

'Access-Control-Allow-Origin': 'https://www.superfunwebsite.com/',
'Access-Control-Allow-Credentials': true

该错误在很大程度上一直存在，除了在一个随机页面加载中，相反，我收到一条错误消息，指出起源https://www.superfunwebsite.com和“ Access-Control-Allow-Origin” https://www.superfunwebsite.com/不匹配。

此后，我将Lambda响应标头更改为此：

'Access-Control-Allow-Origin': 'https://www.superfunwebsite.com',
'Access-Control-Allow-Credentials': true

似乎好像已经解决了异常的第二个错误。

但是，即使我正在使用HTTP客户端（例如Insomnia）进行测试，错误仍然存​​在。 我得到以下回应。

// status code
403

// response
{
  "message": "Forbidden"
}

// headers
Content-Type: application/json
Content-Length: 23
Connection: keep-alive
Date: Tue, 18 Sep 2018 13:22:41 GMT
x-amzn-RequestId: eb691541-bb45-11e8-82ff-6d1b542dffb9
x-amzn-ErrorType: ForbiddenException
x-amz-apigw-id: NaxVLGJgjoEF5Fg=
X-Cache: Error from cloudfront
Via: 1.1 08037e15a3c6f503f39825efeb7f0210.cloudfront.net (CloudFront)
X-Amz-Cf-Id: cbNtb4xKWc48VPFon-Cl9y27KmXRVLIN5SWuYwNWlWsTXeaAXx3z-Q==

根据上述失眠的输出，尽管我不知道具体如何，但我的问题似乎与CloudFront有关。 另一篇S / O帖子似乎表明，CloudFront行为部分中应该为我提供一些选项，使我可以将响应的标头列入白名单，但是这些选项在控制台中对我不可见，我已经看到了一些建议是因为原点在S3上。

我的问题是，是否有人知道如何解决此问题，或者是否还有其他我不认为应该考虑的问题？

Answer 1

在这里，您必须在cloudfront发行版的行为部分中将相应的CORS标头列入白名单。

1. 从Amazon CloudFront控制台打开您的分配
2. 选择“行为”视图。
3. 选择创建行为，或选择一个现有的行为，然后选择编辑。
4. 对于选项“ Cache Based on Selected Request Headers ，选择“白名单”。
5. 在“白名单标题”下，从左侧菜单中选择标题（ Access-Control-Request-Headers和Access-Control-request-methods ， Origin ），然后选择“添加”。
6. 选择是，编辑。

上面的设置应该对您有效（因为它主要用于GET和HEAD ），但是如果不起作用，请使用下面的文章启用OPTIONS方法。 请检查以下来自aws的文章：

没有访问控制允许来源错误

自定义CORS Cloudfront

增强型CloudFront的-定制

Answer 2

该问题现已解决。 最后，这实际上不是CORS问题，而是分期问题。 我的查询失败，因为我正在查询不存在的终结点阶段。

看来，在我使用CloudFront和API Gateway的设置中，当查询不存在的端点时，我返回了一个没有CORS标头的403响应。

然后，浏览器/ CloudFront（不确定是哪个）识别出缺少CORS标头，并对此做出了响应。

在我的情况下，只需从开发阶段更改我的终端节点（与实时阶段关联的关联AWS账户中不存在）：

https://XXXXXXXXXX.execute-api.eu-west-1.amazonaws.com/dev/products

进入现场阶段：

https://XXXXXXXXXX.execute-api.eu-west-1.amazonaws.com/live/products

立即解决了该问题。