CloudFront搭配hls.js播放S3存储HLS视频时出现偶发CORS错误

问题根因 #

这个问题和hls.js库无关，核心原因是CloudFront缓存逻辑没有区分跨域/非跨域请求的响应，导致不带CORS头的响应被缓存复用：

• 当首个请求该m3u8资源的请求未携带Origin头（比如用户直接在浏览器地址栏访问资源地址），S3返回的响应不会带Access-Control-Allow-Origin头，这个响应会被CloudFront缓存
• 后续你的站点发起跨域请求时，CloudFront直接返回了之前缓存的不带CORS头的响应，触发CORS报错
• 禁用缓存时请求会直接回源到S3，此时请求携带Origin头，S3返回带正确CORS头的响应，因此播放正常

解决方案 #

1. 调整CloudFront缓存策略 #

在你当前使用的CloudFront行为对应的缓存策略中，将Origin头添加到「缓存键包含的HTTP头」列表中。配置后不同Origin的请求会生成独立的缓存key，不会共用缓存内容。

2. 调整CloudFront源请求策略 #

确认CloudFront的源请求策略已经配置为将Origin头转发给S3源站，否则S3无法识别跨域请求，不会返回对应的CORS响应头。

3. 清理已缓存的错误内容 #

对该HLS视频相关的资源路径执行CloudFront缓存失效操作，清除之前已经缓存的不带CORS头的旧响应。

额外检查项 #

• 确认S3的CORS配置中AllowedOrigins已经包含你的站点域名https://www.example.com，AllowedMethods包含GET、OPTIONS请求
• 可选配置：开启CloudFront的预检请求缓存功能，由CloudFront直接响应OPTIONS预检请求，无需回源到S3，提升访问性能。

内容的提问来源于stack exchange，提问作者mohsen shafiei