

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

[code]

    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.
    
[/code]

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

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

[code]

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

参考にしたサイト  
[CloudFrontとS3でHLSの動画配信を行う
(動画サイト構築までの道①)](https://zenn.dev/jinwatanabe/articles/3d84675c06ee43)  
[署名付き Cookie を使用して HLS コンテンツを取得してみた](https://dev.classmethod.jp/articles/get-
hls-using-signedcookie/)


CC BY-SA 4.0
2023-01-05T09:31:48.180
93198
2023-01-05T12:47:20.937
2023-01-05T12:47:20.937
3060
55273
question
reactjs amazon-s3 hls
ReactPlayer(hls.js)でHLS配信を実現　CloudFrontエラー「The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*'」