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

上次更新日期： 2021 年 1 年 19 日

我正在轉送我的 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 政策，請參閱 CORS on NGINX 以獲取指示。若要更新作為 Amazon Simple Storage Service (Amazon S3) 儲存貯體的來源的政策，請參閱啟用跨來源資源共享 (CORS) 以獲取指示。

CloudFront 分佈轉送適當的標頭

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

Access-Control-Request-Headers
Access-Control-Request-Method
Origin

若要使用快取政策轉送標頭，請遵循以下步驟：

遵循步驟以使用 CloudFront 主控台建立快取政策。
在 Cache key contents (快取金鑰內容) 下，針對 Headers (標頭)，選取 Whitelist (白名單)。從標頭清單中，選取來源所需的其中一種標頭。然後，選擇 Add header (新增標頭)。對來源所需的所有標頭重複此步驟。
根據您將政策附加到的行為的要求，完成快取政策的所有其他設定。
遵循步驟，以將快取政策附加到 CloudFront 分佈的相關行為。

若要使用舊式快取設定轉送標頭，請按照以下步驟操作：

從 CloudFront 主控台開啟分佈。
選擇 Behaviors (行為) 標籤。
選擇 Create Behavior (建立行為)，或選擇現有的行為，然後選擇 Edit (編輯)。
對於 Cache and origin request settings (快取和來源請求設定)，選擇 Use legacy cache settings (使用舊式快取設定)。
對於 Cache Based on Selected Request Headers (根據選定請求標頭的快取)，選擇 Whitelist (白名單)。
在 Whitelist Headers (白名單標頭) 下，從左側的功能表中選擇您的來源所需的標頭。然後，選擇 Add (新增)。
選擇 Yes, Edit (是，編輯)。

注意：還要確保將標頭作為用戶端請求的一部分專攻到 CloudFront，然後 CloudFront 將其轉送到來源。

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

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

要在 CloudFront 分佈上啟用 OPTIONS 方法，請按照以下步驟操作：

從 CloudFront 主控台開啟分佈。
選擇 Behaviors (行為) 標籤。
選擇 Create Behavior (建立行為)，或選擇現有的行為，然後選擇 Edit (編輯)。
對於允許的 HTTP 方法，選取 GET, HEAD, OPTIONS。
選擇 Yes, Edit (是，編輯)。