在CloudFront + hls.js上获取CORS错误

Question

场景

我使用Cloudfront在S3上播放我的hls视频，并使用hls.js库播放它们

问题

有时我会得到CORS错误，奇怪的是如果我在浏览器中禁用缓存，它运行良好，但是当它使用缓存版本时，它会返回CORS错误

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.

配置

这是我的Cloudfront行为配置

​

这是我的S3 CORS配置

​

我尝试了很多方法，但我不知道问题出在哪里，我在想也许是关于hls.js库的！

Answer 1

我找到了这个问题的解决方案，它只发生在基于铬的浏览器上，为了解决这个问题，应该在非CORS请求中以及中发送不同的标头。

在AWS中，您可以使用Lambda函数来完成它，下面是示例：https://stackoverflow.com/a/57189635/3970050

铬问题：https://bugs.chromium.org/p/chromium/issues/detail?id=409090

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