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 コンテンツを取得してみた