参考
AWS S3とCloudFrontにCORSの設定をしてCSSファイルやJSファイルを配信する
CORS(Cross-Origin Resource Sharing)
CORSとは
Cross-Origin Resource Sharing
オリジン（Origin）とは、
スキーム（http://やhttpsなど）
ホスト名（example.comなど）
ポート番号（:3000など）
のこと。
- http://example.com
- https://example.com
- http://example.com:3000
- https://example.com:3000
- http://example.com:8080
- https://example.com:8080
これらは全て別オリジンということになる。
CORS設定について
システム構成
- Ajaxリクエストを発行する側を A
- Ajaxリクエストを受けてレスポンスを返す側を B
ブラウザは、Bへのリクエストヘッダーにアクセス元のオリジン情報を付加
1
Origin: http://A-site.example.com
Bは、Aへのアクセスを許可する場合に下記レスポンスヘッダを返す
1
Access-Control-Allow-Origin: http://A-site.example.com
ブラウザはレスポンスを見て、許可された別オリジンへのアクセスと判断する
CloudFrontでのCORS
S3に置いたコンテンツをCloudFrontでキャッシュして配信する構成の場合、HTTPヘッダーもキャッシュする設定にしないと、せっかく組んだCORSの設定が反映されない
CloudFrontの設定画面
- ディストリビューションを選択する。
- 「Cache Based on Selected Request Headers」で「WhiteList」を選択する。
- 「Whitelist Headers」に「Origin」を追加する。
CloudFrontは設定を変更しても今キャッシュされているファイルが、再度オリジンから取得されるわけではない。 そこで、コンテンツをオリジンから再取得するために、以下のどちらかの操作をする必要がある。
- オリジンのコンテンツのファイル名を変更して、CloudFront越しにアクセス
- CloudFrontのInvalidation（キャッシュ削除）を実行する
Ruby on Rails などのフレームワークは、1番目の方法
Asset Pipelineを利用して、CSSやJavaScriptをビルドしている
ただ、一度プリコンパイルしたCSS・JavaScriptファイルは変更しないと、ダイジェストが変わらないので注意