imgタグとJavaScriptそれぞれで同じ画像にアクセスした際に Chrome でのみ CORS エラーになる場合の対処 | DevelopersIO

西田@大阪@MAD事業部です 今回は Chrome で1つの画像を同じURLで <img> タグと JavaScript とそれぞれでダウンロードした時に、JavaScriptでのリクエストがCORSエラーになる現象に遭遇したので、その原因を調査しました 現象 WEB(上記図でweb.example.com)から ASSETS (上記図 で assets.example.com) に <img> タグの src 属性に設定して画像をダウンロードした場合は成功して、 JavaScript で fetch関数等を用いてダウンロードした場合は CORS Error になってしまいます 原因 Chrome が<img>タグで画像をダウンロードした際にHTTPヘッダも含めたレスポンスをキャッシュし、JavaScriptでダウンロードしようとした際にHTTPヘッダも含めてそのまま返してしまうのが原因で

[kkeisuke]

“Chrome が<img>タグで画像をダウンロードした際にHTTPヘッダも含めたレスポンスをキャッシュし、JavaScriptでダウンロードしようとした際にHTTPヘッダも含めてそのまま返してしまうのが原因”