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

3 分的閱讀內容
0

我想要允許跨來源存取 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

相關資訊

將 HTTP 標頭新增 Amazon CloudFront 回應

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

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

對 CORS 進行疑難排解

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