如何解決 CloudFront 的「請求的資源上不存在 'Access-Control-Allow-Origin' 標頭」錯誤？

2 分的閱讀內容

我收到針對 Amazon CloudFront 中所請求資源的 CORS 錯誤「不存在 'Access-Control-Allow-Origin'」。為什麼會收到此無誤，我該如何解決它？

解析度

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

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

執行以下命令以確認原始伺服器返回 Access-Control-Allow-Origin 標頭。將 example.com 取代為所需的來源標頭。將 https://www.example.net/video/call/System.generateId.dwr 取代為返回標頭錯誤的資源的 URL。

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 主控台開啟您的分佈。

選擇 Behaviors (行為) 標籤。

選擇 Create Behavior (建立行為)。或者，選取現有行為，然後選擇 Edit (編輯)。

在 Cache key and origin requests (快取金鑰與來源請求) 之下，選擇 Cache policy and origin request policy (快取政策與來源請求政策)。接著對於來源請求政策，從下拉式清單中選擇 CORS-S3Origin 或 CORS-CustomOrigin 。如需詳細資訊，請參閱使用受管來源請求政策。
注意：若要改為建立自己的快取政策，請參閱建立快取政策。

選擇 Create Behavior (建立行為)。或者，如果您正在編輯現有行為指令，請選擇 Save changes (儲存變更)。

若要使用快取政策轉送標頭：

建立快取政策。

在 Cache key settings (快取金鑰設定)，為 Headers (標頭) 選擇 Include the following headers (包含下列標頭)。從 Add header (新增標頭) 下拉式清單中，選擇您的來源所需的其中一個標題。

根據您要連接政策的行為所需，填入快取政策設定。

將快取政策連接至 CloudFront 分佈的行為。

若要使用舊式快取設定轉送標頭：

從 CloudFront 主控台開啟您的分佈。

選擇 Behaviors (行為) 標籤。

選擇 Create Behavior (建立行為)。或者，選取現有行為，然後選擇 Edit (編輯)。

在 Cache key and origin requests (快取金鑰與來源請求) 之下，選擇 Legacy cache settings (舊式快取設定)。

在 Headers (標頭) 下拉式清單中，選擇您的來源所需的標頭。選擇 Add custom (新增自訂) 以新增下拉式清單中未顯示，但您的來源需要的標頭。

選擇 Create Behavior (建立行為)。或者，如果您正在編輯現有行為指令，請選擇 Save changes (儲存變更)。

**注意：**請確定也轉送您的用戶端對 CloudFront 所發送請求之部分的標頭，CloudFront 會將該請求轉送至來源。

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

如果您在更新 CORS 政策及轉送適當的標頭後仍然發現錯誤，請嘗試在您分佈的快取行為中允許 OPTIONS HTTP 方法。根據預設，CloudFront 僅允許使用 GET 和 HEAD 方法。但是，某些 Web 瀏覽器可能會發出 OPTIONS 方法的請求。若要在 CloudFront 分佈上開啟 OPTIONS 方法：

從 CloudFront 主控台開啟您的分佈。

選擇 Behaviors (行為) 標籤。

選擇 Create Behavior (建立行為)。或者，選取現有行為，然後選擇 Edit (編輯)。

對於 Allowed HTTP Methods (允許的 HTTP 方法)，請選擇 GET、HEAD、OPTIONS 。

選擇 Create Behavior (建立行為)。或者，如果您正在編輯現有行為指令，請選擇 Save changes (儲存變更)。

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

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

從 CloudFront 主控台開啟您的分佈。

選擇 Behaviors (行為) 標籤。

選擇 Create Behavior (建立行為)。或者，選取現有行為，然後選擇 Edit (編輯)。

對於 回應標題政策：
從下拉式清單中選取現有的回應政策。
選擇 建立政策 以建立新的回應標頭政策。在新政策中的 跨來源資源共享 下，開啟 CORS。

視需要填入其他設定，然後選擇 建立政策 。

在「Create Behavior (建立行為)」頁面中，從下拉式清單中選擇您建立的政策。

選擇 Create Behavior (建立行為)。或者，如果您正在編輯現有行為指令，請選擇 Save changes (儲存變更)。

**注意：**CloudFront 通常會在五分鐘內將變更部署到分佈。編輯分佈後，請讓快取無效，以清除先前快取的回應。