【AWS】CloudFront+S3のHLS配信で「時々CORSエラーになる」現象の正体と解決策

はじめに

AWS（CloudFront + S3）でHLS動画配信環境を構築していた際、「一部の人がCORSエラーで再生できない」という現象に遭遇し、少しハマりました。
結論から言うと、AWS推奨のManaged-CachingOptimized（キャッシュポリシー）の仕様とS3のCORS挙動の組み合わせによる「キャッシュ汚染」が原因でした。

本記事では、この現象の発生メカニズムと、HLS配信における設定パターン（CloudFront & S3）を共有します。

発生していた事象

構成: CloudFront + S3（Origin）
配信形式: HLS（.m3u8 / .ts）
プレイヤー: hls.js (ブラウザ)

動画再生ページにアクセスすると、ブラウザのコンソールにm3u8ファイルのリクエストでCORSエラーが表示され、動画が再生されませんでした。

しかし、毎回起きるわけではなく、キャッシュ削除後は一時的に直ることがありました。
curlコマンドで確認すると、正常にヘッダーが返ってくることもありました。
CloudFrontの設定で「Origin Request Policy」にはManaged-CORS-S3Originを設定済みです
（OriginヘッダーはS3に届いているはず）。

原因：キャッシュ汚染

原因は CloudFrontのキャッシュポリシーにありました。 デフォルトでよく使われるManaged-CachingOptimizedを設定していましたが、これがHLS配信（S3オリジン）においては落とし穴となります。

1. 何が起きていたのか？

Managed-CachingOptimizedは、キャッシュキーに Origin ヘッダーを含めません。
その結果、以下の流れで「CORSヘッダーなしのレスポンス」がキャッシュされ、それが全ユーザーに配布される状態が発生していました。

① 直アクセス等によるキャッシュ生成

• 管理者のURL直打ち、Bot、リンクプレビューなどにより動画ファイルへ直接アクセスが発生
• このリクエストには Origin ヘッダーが付かない
• S3は Origin が存在しないため、Access-Control-Allow-Origin を付けずにレスポンスを返す
• CloudFrontはこの 「CORSヘッダーなしレスポンス」 をキャッシュする

② 視聴者による通常アクセス

• 視聴者がWebアプリ上のプレイヤーから動画にアクセス
  （例：Origin: https://example.com が付与される）
• CloudFrontはキャッシュポリシーに従い、
  • 「URLが同じ」という理由で
  • ①で保存された CORSヘッダーなしのキャッシュ を返却
• ブラウザは「CORS許可がない」と判断し、CORSエラーを発生させる

2. なぜ Managed-CORS-S3Origin だけではダメなのか？

ビヘイビア設定で「オリジンリクエストポリシー」にManaged-CORS-S3Originを設定していても、これは 「キャッシュミスしてS3に取りに行く時」 にしか効果がありません。 すでにCloudFront上に「Originなし・CORSヘッダーなし」のキャッシュが存在している場合、オリジンへのリクエスト自体が発生しないため、この設定は無視されてしまいます。

解決策：CloudFrontの設定修正

解決策はシンプルです。
「Originヘッダーの有無によって、キャッシュを別々に保存させる」ことです。

カスタムキャッシュポリシーの作成

Managed-CachingOptimized は使用せず、以下の設定でカスタムキャッシュポリシーを作成します。

ポリシー基本情報

• 名前: HLS-CORS-Policy（任意）
• TTL設定: デフォルト（Managed-CachingOptimized と同じ）
• 圧縮サポート（Gzip / Brotli）: 有効

キャッシュキー設定

• ヘッダー（ホワイトリスト）

  • Origin
  • Access-Control-Request-Headers
  • Access-Control-Request-Method

• クエリ文字列

  • なし ※ 署名付きURLなどで変動する場合は注意

• Cookie

  • なし

このポリシーをビヘイビア（.m3u8 および .ts）に適用することで、直アクセス時のキャッシュと、アプリケーションからのキャッシュが隔離され事故が起きなくなります。

まとめ

m3u8のファイルが直接アクセスされることがあまりなく、今回の事象が発覚するまであまり気づけていませんでしたが、改めてCloudFront周りを調べ直して理解が深まりました。
「CachingOptimized にしておけばとりあえずOK」という思考停止が一番の敵でした。同様の現象で悩んでいる方の参考になれば幸いです。