Amazon S3 で CORS を設定し、cURL を使用して CORS ルールを確認する方法を教えてください。

最終更新日: 2021 年 12 月 7 日

Amazon Simple Storage Service (Amazon S3) バケット内のリソースへのクロスオリジンアクセスを許可したいのですが、エラーが発生します。この問題を解決するにはどうすればよいですか?

簡単な説明

Amazon S3 コンソールまたは AWS Command Line Interface (AWS CLI) を使用して、クロスオリジンリソース共有 (CORS) ルールをバケットに適用できます。Amazon S3 バケットで CORS ルールをテストするには、cURL コマンドを使用します。

解決方法

CORS は HTTP の機能で、ヘッダーを使用してウェブサーバーが別のオリジンから要求したコンテンツをブラウザーに表示できるようにします。CORS ルールで定義されていない Amazon S3 バケットに対してクロスオリジンリクエストを行った場合、CORS ヘッダーは返されません。

例:

curl -i http://mycorsbucket.s3.amazonaws.com/cors-test.html -H "Origin: 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

ウェブサーバーがウェブサイトに対して同様のリクエストを行った場合、バケットから取得したコンテンツはブラウザに表示されません。コンテンツを表示できるようにするには、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": [
            "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":["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: 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: 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 コマンドを使用して、 -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: 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":["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: 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: 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