在 CloudFront + hls.js 上出现 CORS 错误
Getting CORS error on CloudFront + hls.js
场景
我正在使用 Cloudfront 在 S3 上提供我的 hls 视频并使用 hls.js 库播放它们
问题
有时我会收到 CORS 错误，奇怪的是如果我在浏览器中禁用缓存，它工作正常，但是当它使用缓存版本时它 returns 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 库的问题！
我找到了这个问题的解决方案，它只发生在基于 Chromium 的浏览器上，要解决这个问题你也应该在非 CORS 请求中发送 varyheader.
在 AWS 中，您可以使用 Lambda 函数来执行此操作，示例如下：https://whosebug.com/a/57189635/3970050
Chromium 问题：https://bugs.chromium.org/p/chromium/issues/detail?id=409090
AWS 问题：https://forums.aws.amazon.com/thread.jspa?threadID=342401&tstart=0
场景
我正在使用 Cloudfront 在 S3 上提供我的 hls 视频并使用 hls.js 库播放它们
问题
有时我会收到 CORS 错误，奇怪的是如果我在浏览器中禁用缓存，它工作正常，但是当它使用缓存版本时它 returns 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 库的问题！
我找到了这个问题的解决方案，它只发生在基于 Chromium 的浏览器上，要解决这个问题你也应该在非 CORS 请求中发送 varyheader.
在 AWS 中，您可以使用 Lambda 函数来执行此操作，示例如下：https://whosebug.com/a/57189635/3970050
Chromium 问题：https://bugs.chromium.org/p/chromium/issues/detail?id=409090
AWS 问题：https://forums.aws.amazon.com/thread.jspa?threadID=342401&tstart=0