在 CloudFront + hls.js 上出现 CORS 错误答案

【问题标题】：Getting CORS error on CloudFront + hls.js在 CloudFront + hls.js 上出现 CORS 错误
【发布时间】：2021-11-10 21:36:35
【问题描述】：

场景

我正在使用 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 库！

【问题讨论】：

我还检查了 curl，一切似乎都正常，我返回了 access-control-allow-origin，access-control-allow-credentials，access-control-allow-methods
而且它似乎只发生在 chrome 上，不确定 btw
缓存行为上是否启用了 OPTIONS HTTP 方法？
是的，它也已启用

标签： amazon-s3 cors amazon-cloudfront m3u8 hls.js

【解决方案1】：

我找到了解决这个问题的方法，它只发生在基于 Chromium 的浏览器上，要解决这个问题您也应该在非 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

【讨论】：