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

CloudFront からの「No Access-Control-Allow-Origin」を解決する