起きた問題
- これまで crossorigin のついてない script タグで JS を読み込んでいたサイトがあった
- JS は app.[hash].js みたいな形式のファイル名で、 Cache-Control: max-age で長めにキャッシュ
- Access-Control-Allow-Origin は当然返していなかった
- Access-Control-Allow-Origin を返すようにして、 crossorigin=anonymous の付いたタグで読み込むように変更
- 200 ok (from cache) でレスポンスヘッダもキャッシュされてしまっていて、 Access-Control-Allow-Origin が返ってきてない状態のキャッシュを使ってしまう
- CORS エラーで JS 読み込み失敗
- Cmd + Shift + R とかでキャッシュ無効のリロードをするまで解決しない
Chrome Developer Tools だと「Access-Control-Allow-Origin が返ってきてない」としか教えてくれなくて、 CORS の設定を疑ってたせいでハマりにハマった。
Safari 開発者ツールを使ってみたら 200 でキャッシュ「はい」で返ってきているのが確認できた上で CORS エラーが出力され、それでようやく問題に気づけた。
解決方法
上記のように長めにキャッシュしてる場合、ファイル名を変えてデプロイするしか方法はなさそう。