S3 + CloudFront で ホスティングしたページのCORS設定方法

概要

クロスドメイントラッキング用サイトを作成するためにS3+CloudFrontでペライチのページをホスティングしたが、CORS設定をしていないので呼び出し元からjsでアクセスできない状況を打破する。

設定方法

S3での設定

• ホスティングしている対象バケットを選択
• 【アクセス権限】タブを選択
• 【CORSの設定】を選択
• 【CORS構成エディター】に下記のように設定を追加

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example1.com</AllowedOrigin>

   <AllowedMethod>GET</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>http://www.example2.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

Methodなどが同じなのであれば下記のようにまとめて記載することも可能

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example1.com</AllowedOrigin>
   <AllowedOrigin>http://www.example2.com</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

CloudFrontの設定

• 【Behaviors】【Edit】に移動
• 【WhitelistHeaders】で【Origin】をAddし反映させる(Access-Control-Request-Geadersはいらない)

補足

ちなみに

   <AllowedOrigin>*</AllowedOrigin>

といった記述は可能だし

   <AllowedOrigin>https://*.example.com</AllowedOrigin>

といったようなサブドメインにワイルドカード指定もできた。
サブドメインのワイルドカード指定できないという記事がいくつかあったので注意。

確認方法

$curl -X GET -I -H "Origin: {上記で設定した接続元}" {接続先}

例

$curl -X GET -I -H "Origin: https://www.example.com" https://www.sample.com

上記のコマンドを実行し

access-control-allow-origin: https://www.example.com
access-control-allow-methods: GET, POST
access-control-allow-credentials: true

などの表示が確認できればてCORS設定ができている。