使用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

立即解決了該問題。