CloudFrontでリソースの配信を行っているとき、Android版のChromeだけでCORSのエラーが表示されることがある。
No 'Access-Control-Allow-Origin' header is present on the requested resource
CloudFrontにおけるCORSの設定は CloudFront からの「No Access-Control-Allow-Origin」を解決する に書いてある通りなのだが、この設定を行っていてもエラーが起きることがある。
Cross-origin request from cache failing after regular request is cached. によると、Chromeがキャッシュからリソースを読み込んだときに起きる現象とのこと。バグではなく仕様扱いなので、今後修正されることはない。
再現条件
自分が遭遇した範囲でのこのCORSエラーの再現条件は下記の通り。
- Android版Chromeを使っている
- CloudFrontからリソースの配信を行っている
- 基本的なCORSの設定は正しく行っている
- scriptタグやstyleタグにcrossorigin="anonymous"属性が付いている
- 二度目以降のページ表示で上記のエラーが起きる
解決策
- CloudFrontから配信しているリソースは、
crossorigin="anonymous"をscriptタグやstyleタグから削除する
私の場合はこれで解決できた。ただし、キャッシュの設定方法や影響範囲は多岐にわたるため、細かい条件によっては他の方法が必要になると思われる。
一例として、Railsでコンパイルしたリソースを下記のコードで配信しているとこのエラーに遭遇する。特に変わったことをしていないのなら、下記のコードでcrossorigin: "anonymous"を付ける意味はなく、単純に削除してよい。
= stylesheet_link_tag 'application', media: 'all', crossorigin: "anonymous"
= javascript_include_tag 'application', crossorigin: "anonymous"
= javascript_pack_tag 'application', crossorigin: "anonymous"
# 上記のコードでは crossorigin: "anonymous" を削除しても問題ない
参考リンク
409090 - Cross-origin request from cache failing after regular request is cached. - chromium