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

2 分的閱讀內容
0

我在 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-S3OriginCORS-CustomOrigin

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

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

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

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

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

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

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

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

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

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

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

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

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

注意: CloudFront 通常會在五分鐘內部署對分佈的變更。編輯分佈後,使快取失效以清除先前快取的回應。

相關資訊

設定 CloudFront 以遵守 CORS 設定

設定跨來源資源共用 (CORS)

使用受管理的回應標頭政策

新增跨來源資源共用 (CORS) 標頭至回應

AWS 官方
AWS 官方已更新 2 年前