はじめに
CORSエラーに苦しめられたので備忘録として残しておこうと思います。
同じ状況で困った人の助けとなればうれしいです。
CORSエラー発生
リリースしてから数か月たったシステムで、ページ内に配置してある動画が見れなくなったとユーザーからお問い合わせがありました。Chromeのデベロッパーツールで確認してみると、動画の取得時にCORSエラーが発生してました。
動画ファイルについてはS3に保存しており、CloudFront経由で配信していました。
S3やCloudFrontのCORS周りの設定を見直してみましたが、設定変更直後は閲覧できても、数日たつとCORSエラーが発生していました。
ネットで調べてみると同じ構成でCORSエラーが出てハマっている先駆者様がいました。
原因
記事内を参考に調べてみると、キャッシュしたS3のオブジェクトを表示する際に、Access-Control-Allow-OriginHeaderの付いていないレスポンスを、Chromeが返していたことが原因でした。CORSエラーが発生していた時、試しにSafariやEdgeで確認したところ問題なく動画を見ることができました。
crbugにissueが上がっていますが、2024/11現在も解決していない模様…
https://bugs.chromium.org/p/chromium/issues/detail?id=741958
解決方法
以下のようなAccess-Control-Allow-OriginHeaderを付与する、CloudFrontのレスポンスヘッダーポリシーを作成しアタッチして、CloudFrontのキャッシュを削除しました。その後、ユーザーからの問い合わせもなくなり無事に解決しました。
デフォルトのポリシーの場合、オーバーライドされないためS3のCORS設定が優先される点に注意。
