CloudFront経由でのCORS利用
- 7. CloudFront + S3 通常のCORS
通常のリクエストなのでpreflightリクエストは飛ばないが、
CloudFrontからS3へのリクエストのところでいくつかのカス
タムヘッダがつくので、そこで動作がおかしくなるケースが
ある。
ヘッダ
ヘッダ Origin: http://test-domain
Origin: http://test-domain X-Amz-Cf-Id: xxxx
X-Forwarded-For: xxx
GETリクエスト GETリクエスト
Browser CF S3
たとえば今回のケースでは ここで、preflightによる確
X-Amz-Cf-Idなどをハード 認なしで飛んできたカスタ
コーディング的にS3の ムヘッダがあるのでCORS
Allowed Headerに設定する とは認識されず、Access-
と動くこともあるが、動い Control-*ヘッダを返せない
たり動かなかったり。 ことがある。
- 8. CloudFront + S3 カスタムヘッダ付きCORS
Cloud FrontがOPTIONSメソッドを禁止しているので、
preflightに失敗する。
ヘッダ
Access-Control-Request-Headers:
origin, accept, x-hoge
OPTIONSリクエスト
Browser 403 Forbidden CF S3
- 10. まとめ
• 現状、CloudFront経由でS3のCORSはうまく
動かないケースがある。これはCORSの
preflightリクエストの仕様上しようがないお
話。
• ワークアラウンドとしては、EC2にWEBサー
バーを立てて、強制的にAccess-Control-
Allow-Originヘッダ等を返してあげるのがい
いと思う。