如何在Amazon S3 中設定 CORS 並使用 cURL 確認 CORS 規則？

解決方法

您可以使用 Amazon S3 主控台或 AWS Command Line Interface (AWS CLI) 將跨原始資源共用 (CORS) 規則套用至儲存貯體。若要在 Amazon S3 儲存貯體上測試 CORS 規則，請使用 cURL 命令。CORS 是 HTTP 的一項功能，它使用標頭允許瀏覽器顯示 Web 伺服器從不同來源請求的內容。如果您向不是由 CORS 規則定義的 Amazon S3 儲存貯體提出跨原始請求，則不會傳回 CORS 標頭。

例如：

curl -i http://mycorsbucket.s3.amazonaws.com/cors-test.html -H "Origin: http://www.example.com"

HTTP/1.1 200 OK
x-amz-id-2: Va106gWx1uUDGbouopXfpjvjHW0VXydI8/VGlraf/62f2vvxtI+iAnmu7lF4MK2B6CxuzReyfRI=
x-amz-request-id: QWNNX1Y0MWFM152H
Date: Thu, 04 Nov 2021 18:52:55 GMT
Last-Modified: Thu, 04 Nov 2021 16:03:50 GMT
ETag: "cd4276d2cd5a2dc8ebcc1e04746680f6"
Accept-Ranges: bytes
Content-Type: text/html
Server: AmazonS3
Content-Length: 55

如果 web 伺服器向網站提出類似的請求，從您的儲存貯體擷取的內容將不會顯示在瀏覽器中。若要允許您的內容顯示，請在 Amazon S3 儲存貯體上設定 CORS 政策。正確的 CORS 政策組態可確保傳回適當的標頭。您可以使用 Amazon S3 主控台或 AWS CLI 在儲存貯體設定 CORS 規則。

使用 Amazon S3 主控台設定 CORS 規則

若要使用 Amazon S3 主控台在儲存貯體設定 CORS 規則，請執行下列步驟：

1.    登入 AWS 管理主控台。

2.    開啟 Amazon S3 主控台。

3.    選取您的儲存貯體。

4.    選擇許可標籤。

5.    在跨原始資源共用窗格中，選擇編輯。

6.    在文字方塊中，輸入您要啟用的 JSON CORS 規則：

Example:

[
  {
    "AllowedHeaders": [
      "Authorization"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD"
    ],
    "AllowedOrigins": [
      "http://www.example.com"
    ],
    "ExposeHeaders": [
      "Access-Control-Allow-Origin"
    ]
  }
]

如需關於每個 CORS 規則元素或範例規則的詳細資訊，請參閱 CORS 組態。

7.    選擇儲存。

使用 AWS CLI 設定 CORS 規則

若要使用 AWS CLI 在您的儲存貯體設定 CORS 規則，請執行下列命令：

aws s3api put-bucket-cors --bucket mycorsbucket --cors-configuration '{"CORSRules" : [{"AllowedHeaders":["Authorization"],"AllowedMethods":["GET","HEAD"],"AllowedOrigins":["http://www.example.com"],"ExposeHeaders":["Access-Control-Allow-Origin"]}]}'

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

測試 CORS 規則

若要測試 CORS 規則，請使用 cURL 命令，如下所示：

curl -i http://mycorsbucket.s3.amazonaws.com/index.html -H "Origin: http://www.example.com"

HTTP/1.1 200 OK
x-amz-id-2: d5Jsw1vCf8tR3cMdXrtcTKYgczU/1pjxahnrw7C6jU1fLo8py2Nv2kpeFs8pYPruVZg6Y3JuRUA=
x-amz-request-id: BMCCY18E58B3GBWV
Date: Thu, 04 Nov 2021 19:12:26 GMT
Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Methods: GET, HEAD
Access-Control-Expose-Headers: Access-Control-Allow-Origin
Access-Control-Allow-Credentials: true
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Last-Modified: Thu, 04 Nov 2021 16:03:50 GMT
ETag: "cd4276d2cd5a2dc8ebcc1e04746680f6"
Accept-Ranges: bytes
Content-Type: text/html
Server: AmazonS3
Content-Length: 55

如果 CORS 規則已正確設定，您會收到 200 OK 回應。

CORS 方法疑難排解

如果您在使用 CORS 組態存取儲存貯體時遇到意外行為，請嘗試下列操作：

1.    使用 cURL 命令，透過新增 -H "Access-Control-Request-Method: <Method>" 旗標來使用特定 CORS 方法提出請求。此旗標指定要測試的 CORS 方法。使用 --request OPTIONS 旗標執行檢查要求的預先檢查。

**注意：**Amazon S3 支援 GET、HEAD、PUT、POST 和 DELETE 方法。

curl -i http://mycorsbucket.s3.amazonaws.com/cors-test.html -H "Access-Control-Request-Method: POST" --request OPTIONS -H "Origin: http://www.example.com"
HTTP/1.1 403 Forbidden
x-amz-request-id: 190J4Q6222HA2KZ5
x-amz-id-2: 6oEci3qg88OeoLvBGwkN8K9AGdxyVela8ZKxftXMqyWrtZFfiKMrBwpTAeRiOth8amovJMtAAdA=
Content-Type: application/xml
Transfer-Encoding: chunked
Date: Fri, 19 Nov 2021 18:43:38 GMT
Server: AmazonS3

<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>AccessForbidden</Code><Message>CORSResponse: This CORS request is not allowed. This is usually because the evalution of Origin, request method / Access-Control-Request-Method or Access-Control-Request-Headers are not whitelisted by the resource's CORS spec.</Message><Method>POST</Method><ResourceType>OBJECT</ResourceType><RequestId>190J4Q6222HA2KZ5</RequestId><HostId>6oEci3qg88OeoLvBGwkN8K9AGdxyVela8ZKxftXMqyWrtZFfiKMrBwpTAeRiOth8amovJMtAAdA=</HostId></Error>

2.    如果請求傳回錯誤，請確認已在儲存貯體上設定 CORS 組態。請確定您已將所需的方法新增至儲存貯體上的 CORS 規則。如果已設定 CORS 組態，您會在 S3 主控台中儲存貯體的權限區段中看到編輯 CORS 組態的選項。

aws s3api put-bucket-cors --bucket mycorsbucket --cors-configuration '{"CORSRules" : [{"AllowedHeaders":["Authorization"],"AllowedMethods":["GET","HEAD","POST"],"AllowedOrigins":["http://www.example.com"],"ExposeHeaders":["Access-Control-Allow-Origin"]}]}'

3.    測試更新的 CORS 規則。如果您的方法正常運作，您會收到下列回應：

curl -i http://mycorsbucket.s3.amazonaws.com/index.html -H "Access-Control-Request-Method: POST" -X OPTIONS -H "Origin: http://www.example.com"
HTTP/1.1 200 OK
x-amz-id-2: Cx4kuM31KPVE19woEPRRYxF+85vEWkLk8+M0p6BIb72T550njMnmLtjqRgYzuxKelR0f+cxhFqI=
x-amz-request-id: QBSHV46QK43HGW15
Date: Fri, 19 Nov 2021 18:48:21 GMT
Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Methods: GET, HEAD, POST
Access-Control-Expose-Headers: Access-Control-Allow-Origin
Access-Control-Allow-Credentials: true
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Server: AmazonS3
Content-Length: 0

4.    使用您選擇的工具擷取完整的請求和回應。對於 Amazon S3 收到的每個請求，您必須具有與請求中的資料相符的 CORS 規則。

• 確認請求具有 Origin 標頭。如果標頭遺失，Amazon S3 不會將請求視為跨來源請求，也不會在回應中傳送 CORS 回應標頭。
• 確認請求中的 Origin 標頭與指定的 CORS 規則中至少一個 **AllowedOrigins **元素相符。Origin 請求標頭中的架構、主機和連接埠值必須與 CORS 規則中的 AllowedOrigins 元素相符。例如，假設您將 CORS 規則設定為允許來源 http://www.example.com。當您執行此操作時，請求中的 https://www.example.com 和 http://www.example.com:80 來源不符合組態中允許的來源。
• 確認您的請求或預先檢查請求中的方法 (在 Access-Control-Request-Method 中指定的方法) 是相同的 CORS 規則中的一個 AllowedMethods 元素。
• 如果預先檢查前請求包含 Access-Control-Request-Headers 標頭，請確認 CORS 規則包含 Access-Control-Request-Headers 標頭中每個值的 AllowedHeader 項目。

相關資訊

將 HTTP 標頭新增至 Amazon CloudFront 回應

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

Amazon S3 如何評估儲存貯體上的 CORS 組態？

CORS 疑難排解