0

ReactPlayer(hls.js)を用いて、HLS配信を行おうと考えています。
HLS配信を行う為に必要なS3やCloudFrontの設定は一通りしたつもりですが、動画配信画面でエラーが出ています。

Access to XMLHttpRequest at 'https://cdn.hogehoge.com/movies/hogehoge.m3u8' from origin 'https://www.hogehoge.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

こちらのエラーの対応としてAllowedOriginsにオリジンのドメインを指定するとあったので、S3のCORS設定にて以下の様に設定してみましたが、エラーの内容が変わりません。

何かお気付きの点、または解答に必要な情報がございましたら、ご指摘いただけますと幸いです。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://www.hogehoge.com",
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]

参考にしたサイト
CloudFrontとS3でHLSの動画配信を行う (動画サイト構築までの道①)
署名付き Cookie を使用して HLS コンテンツを取得してみた

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。