如何解決 CloudFront 的「請求的資源上不存在 'Access-Control-Allow-Origin' 標頭」錯誤?
上次更新日期:2021 年 9 月 14 日
我正在轉送我的 Amazon CloudFront 分佈的來源標頭,但我收到錯誤「請求的資源上不存在 'Access-Control-Allow-Origin' 標頭」。 如何解決此錯誤?
簡短描述
若要避免出現「請求的資源上不存在 'Access-Control-Allow-Origin' 標頭」這項錯誤,請驗證下列項目:
- 來源的跨來源資源共享 (CORS) 政策允許來源傳回 "Access-Control-Allow-Origin" 標頭。
- CloudFront 分佈可轉送適當的標頭。
- CloudFront 分佈的快取行為允許 HTTP 請求的 OPTIONS 方法。
解決方案
來源的 CORS 政策允許來源傳回 "Access-Control-Allow-Origin" 標頭
透過執行與下列內容類似的 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 組態取得指示說明。
CloudFront 分佈可轉送適當的標頭
在來源上設定 CORS 後,可設定 CloudFront 分佈以轉送來源所需的標頭。如果您的來源是 S3 儲存貯體,那麼您通常必須設定分佈,以將以下標頭轉送至 Amazon S3:
- Access-Control-Request-Headers
- Access-Control-Request-Method
- 來源
若要為 S3 或自訂來源開啟 CORS,您需要將必要的標題傳遞至來源。根據使用的來源類型,CloudFront 有兩個預先定義的政策:CORS-S3Origin 和 CORS-CustomOrigin。若要將這些政策新增至您的分佈,請依照下列步驟執行:
- 從 CloudFront 主控台開啟您的分佈。
- 選擇 Behaviors (行為) 標籤。
- 選擇 Create Behavior (選擇行為)。或者,選取現有行為,然後選擇 Edit (編輯)。
- 在 Cache key and origin requests (快取金鑰與來源請求) 之下,選擇 Cache policy and origin request policy (快取政策與來源請求政策)。接著對於 Origin request policy (來源請求政策),從下拉式清單中選擇 CORS-S3Origin 或 CORS-CustomOrigin。如需詳細資訊,請參閱使用受管來源請求政策。
注意:若要改為建立您自己的快取政策,請參閱下列各節。 - 選擇 Save Changes (儲存變更)。如果您正在建立行為,請選擇 Create Behavior (建立行為)。
若要使用來源請求政策轉送標頭,請依照下列步驟執行:
- 請依照下列步驟以使用 CloudFront 主控台建立快取政策。
- 在 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 (新增自訂) 以新增下拉式清單中未列出,但您的來源需要的標頭。
- 選擇 Save Changes (儲存變更)。如果您正在建立行為,請選擇 Create Behavior (建立行為)。
注意:請確定也轉送您的用戶端對 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。
- 選擇 Save Changes (儲存變更)。如果您正在建立行為,請選擇 Create Behavior (建立行為)。
注意:CloudFront 通常會在五分鐘內將變更部署到您的分佈。編輯分佈之後,請考慮使快取失效,否則,您可能仍會收到先前快取的回應。