オンラインM3U8プレーヤーを使用していると、次のような問題に遭遇したことはありませんか？

CORS Error と表示される
動画が読み込み中のままで再生されない
.m3u8 ファイルは開けるが、.ts ファイルの取得に失敗する
ブラウザのコンソールに Access-Control-Allow-Origin のエラーが表示される
Chrome、Edge、スマートフォンのブラウザでも同じ問題が発生する

このような場合、多くはプレーヤー自体の問題ではなく、CORS（Cross-Origin Resource Sharing） が原因です。

この記事では、CORSとは何か、そしてM3U8（HLS）再生時に発生するクロスオリジン問題の解決方法をわかりやすく紹介します。

CORSとは？

CORS（Cross-Origin Resource Sharing）は、日本語でクロスオリジンリソース共有と呼ばれます。

ブラウザはユーザーの安全を守るため、異なるオリジンのリソースへのアクセスをデフォルトで制限しています。

例えば、プレーヤーが以下で動作しているとします。

https://m3u8.wusuper.com

動画は次のサーバーにあります。

https://video.example.com/movie/index.m3u8

ドメイン・プロトコル・ポートのいずれかが異なる場合、ブラウザはクロスオリジンリクエストと判断します。

動画サーバーがアクセスを許可していなければ、ブラウザはリクエストをブロックします。

これが一般的に言われるCORS制限です。

なぜM3U8はCORSエラーが発生しやすいのか？

通常のMP4動画では、ほとんどの場合1つのファイルだけを取得します。

しかし、M3U8（HLS）は異なります。

再生中に次々と複数のファイルを取得します。

index.m3u8

↓

playlist.m3u8

↓

0001.ts
0002.ts
0003.ts
...

さらに暗号化されている場合は、

key.key

も取得します。

これらのうち1つでもCORSが許可されていないと、動画全体の再生が失敗します。

つまり、

M3U8ファイルが開けても、再生できるとは限りません。

次のすべてのリソースでCORSが有効になっている必要があります。

M3U8
TS
KEY
字幕（VTT）
画像

CORSが原因かどうか確認する方法

ブラウザで

F12

を押して、

Network

または

Console

を開きます。

次のようなメッセージが表示された場合、

Access to fetch has been blocked by CORS policy

または

No 'Access-Control-Allow-Origin'

CORSが原因です。

さらに、

Failed to fetch

Network Error

CORS Error

なども、クロスオリジン関連の問題である可能性が高いです。

なぜブラウザはクロスオリジンを制限するのか？

初心者からよく聞かれる質問です。

なぜブラウザはこんなに厳しいのでしょうか？

答えはセキュリティです。

もし制限がなければ、悪意のあるサイトが

ネットバンキング
メール
管理画面
ログイン情報

などへ勝手にアクセスできてしまいます。

そのためブラウザは、

サーバーが

他のサイトからのアクセスを許可します

と明示した場合だけアクセスを許可します。

正しいCORSレスポンスヘッダー

サーバーは次のようなレスポンスヘッダーを返す必要があります。

Access-Control-Allow-Origin: *

または

Access-Control-Allow-Origin: https://m3u8.wusuper.com

さらに、プリフライトリクエスト（OPTIONS）を使用する場合は、

Access-Control-Allow-Methods: GET,POST,OPTIONS

および

Access-Control-Allow-Headers: *

も設定する必要があります。

NginxでCORSを有効にする

Nginxでは次の設定を追加します。

location / {

    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers *;

}

HLS配信では、

location ~* \.(m3u8|ts)$ {

    add_header Access-Control-Allow-Origin *;

}

のように設定することをおすすめします。

設定後は、

nginx -s reload

で反映されます。

ApacheでCORSを有効にする

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>

Node.js（Express）の設定

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');

  next();
});

他のプレーヤーでは再生できるのに、自分のプレーヤーでは再生できない理由

これは非常によくある誤解です。

他のプレーヤーは、

サーバープロキシを使用している
独自にM3U8を解析している
CDNでCORSを有効にしている
同一オリジンで運用している
動画サーバー自体がCORS対応している

可能性があります。

一方、通常のオンラインプレーヤーは、

ブラウザ
↓
動画サーバー

へ直接アクセスします。

そのため、ブラウザのCORS制限を回避することはできません。

フロントエンドだけでCORSを回避できる？

よくある質問です。

JavaScriptでCORSを無効にできますか？

答えは、

できません。

Vue、React、Astro、Next.jsなど、どのフレームワークでもブラウザのセキュリティ制限を回避することはできません。

解決方法は次の2つだけです。

✅ 動画サーバー側でCORSを有効にする

または

✅ 自分のサーバーでリバースプロキシを構築する

よく使われる解決方法

方法	おすすめ
動画サーバーでCORSを有効化	⭐⭐⭐⭐⭐
NginxでAccess-Control-Allow-Originを追加	⭐⭐⭐⭐⭐
リバースプロキシを使用	⭐⭐⭐⭐⭐
CDNでCORS設定	⭐⭐⭐⭐
プレーヤーを変更	⭐
ブラウザのセキュリティを無効化	❌ 非推奨

動画サーバーを変更できない場合

例えば、

https://example.com/video/index.m3u8

のような公開URLでは、自分で設定を変更できません。

この場合は、

方法1：自分でプロキシを作成

ブラウザ
↓
自分のサーバー
↓
動画サーバー

または、

方法2：動画提供元へ依頼

Access-Control-Allow-Origin

ヘッダーを追加してもらうのが最も正しい方法です。

オンラインM3U8プレーヤーでCORSエラーが表示される理由

当サイトのオンラインM3U8プレーヤーをご利用の場合、

プレイリストを解析できない
TSファイルの読み込みに失敗する
黒い画面になる
バッファリングが終わらない
ConsoleにCORSエラーが表示される

といった症状が発生することがあります。

そのほとんどはプレーヤーではなく、動画サーバー側のCORS設定が原因です。

動画サーバーを管理している場合は、まずCORSを有効化してください。

サードパーティの動画ソースを利用している場合は、クロスオリジンアクセスに対応しているか確認しましょう。

まとめ

M3U8が再生できない場合、多くの人はプレーヤーの不具合だと思いがちです。

しかし、実際にはCORSが最も多い原因の1つです。

覚えておきたいポイントは次のとおりです。

ブラウザはデフォルトでクロスオリジンアクセスを制限する
M3U8再生では複数のファイル（M3U8・TS・KEYなど）を取得する
どれか1つでもCORSが設定されていなければ再生できない
フロントエンドだけでは回避できない
サーバーでAccess-Control-Allow-Originを設定するか、リバースプロキシを利用するのが最適な解決方法

M3U8リンクのテストや再生エラーの原因調査には、当サイトのオンラインM3U8プレーヤーをご利用ください。リンク切れ、CORS制限、または動画ソース自体の問題かどうかを素早く確認できます。

CORS（クロスオリジン）とは？M3U8再生時のクロスオリジンエラーを解決する方法【2026年最新版】