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

3 分的閱讀內容

我想要允許跨來源存取 Amazon Simple Storage Service (Amazon S3) 儲存貯體中的資源，但收到錯誤。如何解決此問題？

簡短描述

您可以使用 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. 選擇 Permissions (許可) 標籤。

5. 在 Cross-origin resource sharing (跨來源資源共用) 窗格中，選擇 Edit (編輯)。

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

Example:

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

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

7. 選擇 Save (儲存)。

使用 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 方法進行疑難排解

您還可以使用 cURL 命令，以使用特定 CORS 方法提出請求，方法為新增 -H "Access-Control-Request-Method: <Method>" 旗標。此旗標指定要測試的 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>

如果請求傳回錯誤，則會將所需的方法新增到儲存貯體上的 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"]}]}'

測試已更新的 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