Access-Control-Allow-Originヘッダを正常に追加したにもかかわらずapp.jpからassets.app.jpにあるアセットにアクセスしようとした際に以下のエラーが出ることがあります。
Access to Script at 'https://assets.app.jp/application-abcdefghijklmn.js' from origin 'https://app.jp' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://app.jp' is therefore not allowed access.
これは Access-Control-Allow-Originヘッダが付いていない状態でscriptタグによるjsの読み込み部分に crossorigin属性を追加した時と同じ挙動です。発生原因はjsのキャッシュです。
こちらによるとChromeでは Access-Control-Allow-Originなどのヘッダーがキャッシュされないために起こる問題と書かれています。
回避方法
以下の2つの回避方法が考えられます。
- ファイル名を変える
- ACCESS_CONTROL_MAX_AGEをなるべく短く設定する(参考)
自分の場合はRailsのproduction環境だったのでasset:precompileで生成されるハッシュを変えればよさそうだったため適当なjsファイルに空行を追加してデプロイしました。