33464


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

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

[code]

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

この状態で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.`というエラーが発生してしまいます。

[code]

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

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


CC BY-SA 3.0
2017-03-22T08:30:31.693
33458
2017-03-22T12:23:21.600
21154
question
javascript 画像 amazon-s3 cors
Google Chromeでのamazon S3画像へのクロスドメイン接続


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

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

[S3 not returning Access-Control-Allow-Origin headers? - Stack
Overflow](https://stackoverflow.com/q/17570100/2818869)

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

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


CC BY-SA 3.0
2017-03-22T12:23:21.600
33464
2017-03-22T12:23:21.600
2017-05-23T12:38:56.467
-1
8000
33458
answer