作成日：

S3 + CloudFrontの構成でCORSを有効にする

Amazon S3のコンテンツをAmazon CloudFrontで公開している時に、Ajaxでコンテンツにアクセスする場合はCORSの設定が必要になります。

必要な設定は次の3つになります。

  1. Amazon S3のCross-Origin Resource Sharing (CORS)
  2. Amazon CloudFrontのキャッシュポリシー
  3. Amazon CloudFrontのオリジンリクエストポリシー

Amazon S3のCross-Origin Resource Sharing (CORS)

対象のバケットを選択します。

「アクセス許可」の中に「Cross-Origin Resource Sharing (CORS)」があるので「編集」で値を設定します。

設定するのは例えば次の内容になります。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

詳細は公式サイトのCORS configurationをご覧ください。

Amazon CloudFrontのキャッシュポリシー

対象のディストリビューションを選択します。

ビヘイビアの編集で「キャッシュキーとオリジンリクエスト」の「キャッシュポリシー」で選択しているキャッシュポリシーの設定を変更します。ただし、例えばマネージドポリシーのCachingDisabledのようにキャッシュを行わない場合は、設定の変更はなく次のオリジンリクエストポリシーの設定も不要です。

キャッシュをする場合はキャシュポリシーの「キャッシュキー設定」で次のヘッダーを含めるようにします。

  1. Origin
  2. Access-Control-Request-Method
  3. Access-Control-Request-Headers

Amazon CloudFrontのオリジンリクエストポリシー

最後はキャッシュポリシーの次にある「オリジンリクエストポリシー」の設定です。

個別の設定が不要であればマネージドポリシーの「CORS-S3Origin」を選択します。

カスタムポリシーを使う場合は「オリジンリクエストの設定」で次のヘッダーを含めるようにします。

  1. Origin
  2. Access-Control-Request-Method
  3. Access-Control-Request-Headers