外部の動画配信サービスの再生時にCORSエラーが発生します。

Question

お世話になります。

リソースの取得にBearerトークンの設定が必要な
HTTP Live Streamingリソースがあり
それをWindows上のブラウザで再生する方法を探しています。

下記の通りCORSエラーが出ており再生したいのですが上手くいきません。
ソースは下記の通りです。
（hls.jsを使用しています）

調べると配信元のサーバープログラムでレスポンスに「Access-Control-Allow-Origin」を指定する
修正が必要だという記事が見つかりますが、配信元は外部のサービスのためそれは出来ません。

この場合どうすれば再生できるかご教授よろしくお願いします。

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<video id="video" controls></video>

<script>
if (Hls.isSupported()) {
  const video = document.getElementById('video');
  const hls = new Hls({
    xhrSetup: xhr => {
      xhr.setRequestHeader( "Authorization", "Bearer XXXXXXXXXX");
    }
  })
  hls.attachMedia(video);

  hls.on(Hls.Events.MEDIA_ATTACHED, function () {
    hls.loadSource("http://XXXXXXXXXX/sample.m3u8");
  });

}
</script>

※開発者ツールのコンソールに表示されるエラー

Access to XMLHttpRequest at 'http://XXXXXXXXXX/sample.m3u8' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

それをできないようにするのがCORS制限です。
バックエンドサーバで取得してください。