AWS CloudFront CORS設定について

参考

AWS S3とCloudFrontにCORSの設定をしてCSSファイルやJSファイルを配信する

CORS(Cross-Origin Resource Sharing)

CORSとは

Cross-Origin Resource Sharing

オリジン(Origin)とは、

スキーム(http://やhttpsなど)
ホスト名(example.comなど)
ポート番号(:3000など)
のこと。

CORS設定について

システム構成

  • Ajaxリクエストを発行する側を A
  • Ajaxリクエストを受けてレスポンスを返す側を B
  1. ブラウザは、Bへのリクエストヘッダーにアクセス元のオリジン情報を付加

    1
    Origin: http://A-site.example.com
  2. Bは、Aへのアクセスを許可する場合に下記レスポンスヘッダを返す

    1
    Access-Control-Allow-Origin: http://A-site.example.com
  3. ブラウザはレスポンスを見て、許可された別オリジンへのアクセスと判断する

CORS-01

CORS-02

CloudFrontでのCORS

S3に置いたコンテンツをCloudFrontでキャッシュして配信する構成の場合、HTTPヘッダーもキャッシュする設定にしないと、せっかく組んだCORSの設定が反映されない

CloudFrontの設定画面

  1. ディストリビューションを選択する。
  2. 「Cache Based on Selected Request Headers」で「WhiteList」を選択する。
  3. 「Whitelist Headers」に「Origin」を追加する。

CloudFrontは設定を変更しても今キャッシュされているファイルが、再度オリジンから取得されるわけではない。 そこで、コンテンツをオリジンから再取得するために、以下のどちらかの操作をする必要がある。

  • オリジンのコンテンツのファイル名を変更して、CloudFront越しにアクセス
  • CloudFrontのInvalidation(キャッシュ削除)を実行する

Ruby on Rails などのフレームワークは、1番目の方法
Asset Pipelineを利用して、CSSやJavaScriptをビルドしている
ただ、一度プリコンパイルしたCSS・JavaScriptファイルは変更しないと、ダイジェストが変わらないので注意

コメント

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×