如何解決 CloudFront 中的 "No 'Access-Control-Allow-Origin' header is present on the requested resource" 錯誤？

2 分的閱讀內容

我在 Amazon CloudFront 中所要求的資源上收到 CORS 錯誤 "No 'Access-Control-Allow-Origin'"。

解決方法

確認來源的跨來源資源共用 (CORS) 政策允許來源傳回 Access-Control-Allow-Origin 標頭

**注意：**如果您在執行 AWS Command Line Interface (AWS CLI) 命令時收到錯誤，請確保您使用的是最新的 AWS CLI 版本。

執行下列命令以確認原始伺服器傳回 Access-Control-Allow-Origin 標頭。以必要的原始標頭取代 example.com。以傳回標頭錯誤的資源之 URL 取代 https://www.example.net/video/call/System.generateId.dwr。

curl -H "Origin: example.com" -v "https://www.example.net/video/call/System.generateId.dwr"

如果 CORS 政策允許原始伺服器傳回 Access-Control-Allow-Origin 標頭，您會看到類似下列的回應：

HTTP/1.1 200 OK
Server: nginx/1.10.2
Date: Mon, 01 May 2018 03:06:41 GMT
Content-Type: text/html
Content-Length: 3770
Last-Modified: Thu, 16 Mar 2017 01:50:52 GMT
Connection: keep-alive
ETag: "58c9ef7c-eba"
Access-Control-Allow-Origin:
    example.com
Accept-Ranges: bytes

如果回應中未傳回 CORS 標頭，則表示原始伺服器未對 CORS 正確設定。設定有關自訂來源或 Amazon Simple Storage Service (Amazon S3) 來源的 CORS 政策。

設定 CloudFront 分佈，以將適當的標頭轉送至原始伺服器

在原始伺服器上設定 CORS 政策之後，設定 CloudFront 分佈以將原始標頭轉送至原始伺服器。如果您的原始伺服器是 Amazon S3 儲存貯體，請設定您的分佈以將下列標頭轉送至 Amazon S3：

Access-Control-Request-Headers
Access-Control-Request-Method
來源

若要將標頭轉送至原始伺服器，CloudFront 具有兩個預先定義的政策，視您的來源類型而定義： CORS-S3Origin 和 CORS-CustomOrigin。

若要將預先定義的政策新增至您的分佈，請執行以下操作：

從 CloudFront 主控台開啟分佈。
選擇行為標籤。
選擇建立行為。或者，選取現有行為，然後選擇編輯。
在快取金鑰和原始請求下，選擇**快取政策和原始請求政策。**然後，對於原始請求政策，從下拉式清單中選擇 CORS-S3Origin 或 CORS-CustomOrigin。如需詳細資訊，請參閱使用受管理的原始請求政策。
注意：若要改為建立自己的快取政策，請參閱建立快取政策。
選擇建立行為。或者，如果是編輯現有行為，請選擇儲存變更。

若要使用快取政策轉送標頭，請執行以下操作：

建立快取政策。
在快取金鑰設定下，為標頭選擇包含下列標頭。從新增標題下拉式清單中，選擇來源所需的其中一個標頭。
根據您要附加政策的行為所需填寫快取政策設定。
將快取政策附加至 CloudFront 分佈的行為。

若要使用舊式快取設定轉送標頭，請執行以下操作：

從 CloudFront 主控台開啟分佈。
選擇行為標籤。
選擇建立行為。或者，選取現有行為，然後選擇編輯。
在快取金鑰和原始請求下，選取舊式快取設定。
在標頭下拉式清單中，選擇來源所需的標頭。選擇新增自訂以新增來源所需但未出現在下拉式清單中的標頭。
選擇建立行為。或者，如果是編輯現有行為，請選擇儲存變更。

**注意：**另請確保將標頭作為用戶端要求的一部分轉送給 CloudFront，CloudFront 會將其轉送到來源。

設定 CloudFront 分佈的快取行為，以允許 HTTP 請求使用 OPTIONS 方法

如果您在更新 CORS 政策並轉送適當的標頭後仍然看到錯誤，請允許在分佈的快取行為中使用 OPTIONS HTTP 方法。依預設，CloudFront 僅允許 GET 和 HEAD 方法。但某些網頁瀏覽器可以發出 OPTIONS 方法的請求。若要在 CloudFront 分佈上開啟 OPTIONS 方法，請執行以下操作：

從 CloudFront 主控台開啟分佈。
選擇行為標籤。
選擇建立行為。或者，選取現有行為，然後選擇編輯。
對於允許的 HTTP 方法，選取 GET、HEAD、OPTIONS。
選擇建立行為。或者，如果是編輯現有行為，請選擇儲存變更。

設定 CloudFront 回應政策，以傳回所需的 Access-Control-Allow-Origin 標頭

如果原始伺服器無法存取或無法設定傳回適當的 CORS 標頭，請設定 CloudFront 以傳回所需的 CORS 標頭。若要設定，請建立回應標頭政策：

從 CloudFront 主控台開啟分佈。
選擇行為標籤。
選擇建立行為。或者，選取現有行為，然後選擇編輯。
對於回應標頭政策：
從下拉式清單中選取現有的回應政策。
-或-
選擇建立政策以建立新的回應標頭政策。在新政策中的跨來源資源共用下，開啟 CORS。
根據需要填寫其他設定，然後選擇建立政策。
在「建立行為」頁面中，從下拉式清單中選擇您建立的政策。
選擇建立行為。或者，如果是編輯現有行為，請選擇儲存變更。