Amazon S3 で CORS を設定し、cURL を使用して CORS ルールを確認する方法

解決方法

オリジン間リソース共有 (CORS) ルールをバケットに適用するには、Amazon S3 コンソールまたは AWS コマンドラインインターフェイス (AWS CLI) のいずれかを使用します。Amazon S3 バケットで CORS ルールをテストするには、cURL コマンドを使用します。CORS は HTTP の機能の 1 つであり、ウェブサーバーが別のオリジンから要求したコンテンツを、ブラウザーがヘッダーによって表示できるようにします。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

ウェブサーバーがウェブサイトに対して同様のリクエストを行っても、バケットから取得したコンテンツはブラウザに表示されません。コンテンツを表示できるようにするには、Amazon S3 バケットに CORS ポリシーを設定します。適切に CORS ポリシーを設定することで、適切なヘッダーが返されます。バケットに CORS ルールを設定するには、Amazon S3 コンソールまたは AWS CLI を使用します。

Amazon S3 コンソールを使用して CORS ルールを設定

Amazon S3 コンソールを使用してバケットに CORS ルールを設定するには、次の手順を実行します。

1. AWS マネジメントコンソールにサインインします。

2.    Amazon S3 コンソールを開きます。

3. バケットを選択します。

4.    **[権限]**タブを選択します。

5. [Cross-origin resource sharing] ペインで [編集する] を選択します。

6. テキストボックスに、有効にしたい JSON CORS ルールを入力します。

Example:

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

CORS ルールの個々の要素や例については、「CORS configuration」を参照してください。

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コマンドを実行するとエラーが発生する場合は、「Troubleshooting AWS CLI errors」内のセクション「Confirm that you're running a recent version of the 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 コマンドを特定の 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>

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 ヘッダーが、指定した CORSRule の Allow-Origin 要素の少なくとも 1 つと一致することを確認します。Origin リクエストヘッダーのスキーム、ホスト、ポートの値は、CORSrule の Allow-Origin 要素と一致する必要があります。例えば、オリジン http://www.example.com を許可する (受け入れる) ように CORSRule を設定したとします。これを行うと、リクエスト内の https://www.example.com および http://www.example.com:80 のオリジンが、設定で許可されているオリジンと一致しなくなります。
• リクエストまたはプリフライトリクエスト内のメソッド (Access-Control-Request-Method に指定されたメソッド) が、同じ CORSrule 内の Allow-Methods 要素の 1 つであることを確認します。
• プリフライトリクエストに Access-Control-Request-Headers ヘッダーが含まれている場合は、CORSrule に Access-Control-Request-Headers ヘッダー内の各値に対する AllowedHeaders エントリが含まれていることを確認します。

関連情報

Adding HTTP headers to Amazon CloudFront responses

CloudFront から (出力された)「リクエストされたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません」というエラーを解決するにはどうすればよいですか?

How does Amazon S3 evaluate the CORS configuration on a bucket?

Troubleshoot CORS