0

S3に配置された画像ファイルをクロスドメイン接続で取得したいのですがGoogle Chromeだけできません。

S3のCORSの設定には下記を設定しています。

<CORSConfiguration>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

この状態でGoogle Chromeのコンソールで下記を実行するとAccess to Image at 'https://SOME_BUCKET_NAME.s3-ap-northeast-1.amazonaws.com/hoge.jpg' from origin 'http://SOME.ORIGIN.SITE' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://SOME.ORIGIN.SITE' is therefore not allowed access.というエラーが発生してしまいます。

img = new Image
img.crossOrigin = 'Anonymous'
img.src = 'https://SOME_BUCKET_NAME.s3-ap-northeast-1.amazonaws.com/hoge.jpg'

EdgeやFirefoxではエラーが発生しません。
なおGoogle Chromeのバージョンは57.0.2987.110 (64-bit)です。

1 件の回答 1

1

S3 はリクエストに Orgin ヘッダが含まれていないと Access-Control- 系のヘッダを返さないらしいのですが、この必要なヘッダが含まれていないレスポンスをブラウザがキャッシュしてしまっていると、それ以降はキャッシュを見ただけで失敗としてしまうことがあるようです。

例えば crossOrigin 属性を指定しない img 要素では Origin ヘッダを送信しないので、crossOrigin 属性を設定する前のレスポンスがキャッシュされてるとこの現象が発生します。

S3 not returning Access-Control-Allow-Origin headers? - Stack Overflow

というわけで、一度Chromeのキャッシュを削除してみてはいかがでしょうか。

ブラウザ間での違いについては、Expires 等を指定していないリソースで試してみたところ、Firefox では2回目でも If-Modified-Since 付きのリクエストを送ったのに対して Chrome では一切リクエストを送信していませんでした。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。