AWSのCloudfront--S3にあるhlsファイルに、認証Cookieでアクセスが直接は出来るが、間接だと出来なくなる

Question

お世話になっております。参照サイトを見ながら、下記の処理を行おうとしました。
【やりたいこと】
1.s3にhlsファイルを置く。
2.Cloudfrontで1のs3にアクセスする。
3.CloudFrontのアクセスに認証cookieがないとアクセスできないようにする。
4.vueで生成されたstaticファイル内のvideoタグでhlsファイルを再生する。

※参照サイト
https://dev.classmethod.jp/articles/video-js-play-hls-streaming-s3-cloudfront-cors/

【行ったこと】
1.vue生成のstaticファイル(以下vueファイル)から呼び出されるAjax(PHP)ファイルで認証Cookie文字列を生成し、返す
2.vueファイルで応答された文字列を使用し、cookieとして取り扱う
==> ディベロッパーツールのApplicationパネルでcookieを確認
3.vueファイルのvideo.jsで読み込もうとすると以下のエラー

Access to XMLHttpRequest at 'https://cloudfront.test.com/hls_file/output.m3u8' from origin 'https://vue.test.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

==> ブラウザに直接URL"https://cloudfront.test.com/hls_file/output.m3u8"を打ち込むとアクセスできる(ダウンロード開始)

【主な設定】
・s3
1.ブロックパブリックアクセス (バケット設定)
==> 「パブリックアクセスをすべてブロック」をOff
==> 「新しいアクセスコントロールリスト (ACL) を介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする」をOff
2.Cross-Origin Resource Sharing (CORS)

{
  "AllowedHeaders": [
    "*"
  ],
  "AllowedMethods": [
    "GET"
  ],
  "AllowedOrigins": [
    "https://vue.test.com",
    "vue.test.com",
  ],
  "ExposeHeaders": [],
  "MaxAgeSeconds": 3000
}

・Coudfront
1.Alternate Domain Names(CNAMEs)
==> cloudfront.test.com

・Route53
1.CNAMES
==> cloudfront.test.com

おわかりになる方いらっしゃいましたら、よろしくお願いいたします