Posted at

JS を途中から <script crossorigin=anonymous> で配信することにした場合はキャッシュに注意

More than 1 year has passed since last update.


起きた問題


  1. これまで crossorigin のついてない script タグで JS を読み込んでいたサイトがあった


    • JS は app.[hash].js みたいな形式のファイル名で、 Cache-Control: max-age で長めにキャッシュ

    • Access-Control-Allow-Origin は当然返していなかった



  2. Access-Control-Allow-Origin を返すようにして、 crossorigin=anonymous の付いたタグで読み込むように変更

  3. 200 ok (from cache) でレスポンスヘッダもキャッシュされてしまっていて、 Access-Control-Allow-Origin が返ってきてない状態のキャッシュを使ってしまう

  4. CORS エラーで JS 読み込み失敗


    • Cmd + Shift + R とかでキャッシュ無効のリロードをするまで解決しない



Chrome Developer Tools だと「Access-Control-Allow-Origin が返ってきてない」としか教えてくれなくて、 CORS の設定を疑ってたせいでハマりにハマった。

Safari 開発者ツールを使ってみたら 200 でキャッシュ「はい」で返ってきているのが確認できた上で CORS エラーが出力され、それでようやく問題に気づけた。


解決方法

上記のように長めにキャッシュしてる場合、ファイル名を変えてデプロイするしか方法はなさそう。