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

上次更新日期：2021 年 9 月 14 日

若要避免出現「請求的資源上不存在 'Access-Control-Allow-Origin' 標頭」這項錯誤，請驗證下列項目：

• 來源的跨來源資源共享 (CORS) 政策允許來源傳回 "Access-Control-Allow-Origin" 標頭。
• CloudFront 分佈可轉送適當的標頭。
• CloudFront 分佈的快取行為允許 HTTP 請求的 OPTIONS 方法。

透過執行與下列內容類似的 curl 命令檢查來源是否傳回 "Access-Control-Allow-Origin" 標頭：

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

如果 CORS 政策允許來源傳回標頭，則該命令會傳回類似於以下內容的訊息：

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

若要為 NGINX 上的來源更新 CORS 政策，請參閱 NGINX 上的 CORS 取得指示說明。若要為是 Amazon Simple Storage Service (Amazon S3) 儲存貯體的來源更新政策，請參閱 CORS 組態取得指示說明。

在來源上設定 CORS 後，可設定 CloudFront 分佈以轉送來源所需的標頭。如果您的來源是 S3 儲存貯體，那麼您通常必須設定分佈，以將以下標頭轉送至 Amazon S3：

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

若要為 S3 或自訂來源開啟 CORS，您需要將必要的標題傳遞至來源。根據使用的來源類型，CloudFront 有兩個預先定義的政策：CORS-S3Origin 和 CORS-CustomOrigin。若要將這些政策新增至您的分佈，請依照下列步驟執行：

1. 從 CloudFront 主控台開啟您的分佈。
2. 選擇 Behaviors (行為) 標籤。
3. 選擇 Create Behavior (選擇行為)。或者，選取現有行為，然後選擇 Edit (編輯)。
4. 在 Cache key and origin requests (快取金鑰與來源請求) 之下，選擇 Cache policy and origin request policy (快取政策與來源請求政策)。接著對於 Origin request policy (來源請求政策)，從下拉式清單中選擇 CORS-S3Origin 或 CORS-CustomOrigin。如需詳細資訊，請參閱使用受管來源請求政策。
   注意：若要改為建立您自己的快取政策，請參閱下列各節。
5. 選擇 Save Changes (儲存變更)。如果您正在建立行為，請選擇 Create Behavior (建立行為)。

若要使用來源請求政策轉送標頭，請依照下列步驟執行：

1. 請依照下列步驟以使用 CloudFront 主控台建立快取政策。
2. 在 Cache key settings (快取金鑰設定)，為 Headers (標頭) 選擇 Include the following headers (包含下列標頭)。從 Add header (新增標頭) 下拉式清單中，選擇您的來源所需的其中一個標題。
3. 根據您要將政策附加至的行為的要求，完成快取政策的所有其他設定。
4. 依照步驟將快取政策附加至 CloudFront 分佈的相關行為。

若要使用舊式快取設定轉送標頭，請依照下列步驟執行：

1. 從 CloudFront 主控台開啟您的分佈。
2. 選擇 Behaviors (行為) 標籤。
3. 選擇 Create Behavior (選擇行為)。或者，選取現有行為，然後選擇 Edit (編輯)。
4. 在 Cache key and origin requests (快取金鑰與來源請求) 之下，選擇 Legacy cache settings (舊式快取設定)。
5. 在 Headers (標頭) 下拉式清單中，選擇您的來源所需的標頭。如果需要，請選擇 Add custom (新增自訂) 以新增下拉式清單中未列出，但您的來源需要的標頭。
6. 選擇 Save Changes (儲存變更)。如果您正在建立行為，請選擇 Create Behavior (建立行為)。

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

如果您在更新 CORS 政策及轉送適當的標頭後仍然發現錯誤，請嘗試在您分佈的快取行為中允許 OPTIONS HTTP 方法。預設情況下，CloudFront 只允許 GET 和 HEAD 方法，但某些 Web 瀏覽器可能會發出 OPTIONS 方法的請求。

若要在 CloudFront 分佈上開啟 OPTIONS 方法，請依照下列步驟執行：

1. 從 CloudFront 主控台開啟您的分佈。
2. 選擇 Behaviors (行為) 標籤。
3. 選擇 Create Behavior (選擇行為)。或者，選取現有行為，然後選擇 Edit (編輯)。
4. 對於 Allowed HTTP Methods (允許的 HTTP 方法)，請選擇 GET、HEAD、OPTIONS。
5. 選擇 Save Changes (儲存變更)。如果您正在建立行為，請選擇 Create Behavior (建立行為)。

注意：CloudFront 通常會在五分鐘內將變更部署到您的分佈。編輯分佈之後，請考慮使快取失效，否則，您可能仍會收到先前快取的回應。