CloudFrontとS3のCORS設定

CloudFrontとS3のCORS設定でハマる…

• 端末、使用ブラウザよってエラーになったりならなかったり
• 時間がない、色々調べるのに手が回らない
• 見よう見まねでやるもうまくいかず
• とりあえず、良くなった方法を書いてみる

S3 バケットの設定

プロパティ > アクセス許可 > CORS設定の追加(編集)

CORS設定の追加(編集)

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://www.example.com</AllowedOrigin>
        <AllowedOrigin>https://www.example.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

ClowdFrontの設定

Distributions > Distribution Settings > Behaviors > Edit

• 『forward headers』へ『Origin』を追加

確認

CURLコマンド
curl -I -s -X GET -H "Origin: www.example.com" http://example.cloudfront.net/test.jpg

Chrome
デベロッパー ツール > NetWork
varyの項目を表示させて『Origin』となってればOK