Search code examples
amazon-s3corsamazon-cloudfrontm3u8hls.js

Getting CORS error on CloudFront + hls.js

Scenario

I am serving my hls videos on S3 with Cloudfront and play them with hls.js library

Problem

Sometimes I am getting CORS errors, the weird part is if I disable cache in the browser, it's working fine, but when it's use the cached version it returns the CORS error

Access to XMLHttpRequest at 'https://a-subdomin.cloudfront.net/myvideo.m3u8' from origin 'https://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Configs

Here is my Cloudfront behavior config enter image description here

and here is my S3 CORS config
enter image description here

I tried many ways, but I don't know what is the problem, I am thinking maybe it's about hls.js library!

Solution

  • I found the solution for this issue, it's only happening for Chromium based browsers, and to fix this issue you should send the vary header in non CORS requests as well.

    in AWS you can use Lambda functions to do it, here is the example: https://stackoverflow.com/a/57189635/3970050

    Chromium issue: https://bugs.chromium.org/p/chromium/issues/detail?id=409090

    AWS issue: https://forums.aws.amazon.com/thread.jspa?threadID=342401&tstart=0