一、HLS 开发中 CORS 跨域的真实业务痛点
使用 hls.js 做网页 HLS 播放时，CORS 跨域是出现频率最高的故障之一。很多开发者遇到控制台打印No 'Access‑Control‑Allow‑Origin' header报错，直接黑屏无法播放。很多人对跨域理解片面，以为只需要给 M3U8 索引配置跨域头就万事大吉，却忽略 TS 分片、AES 密钥资源同样需要配置跨域，这也是大量线上问题的根源。
这类故障现象很有迷惑性：curl 命令访问 M3U8、TS 分片返回 200 正常；VLC 播放器完全不受浏览器同源策略限制，可以流畅播放流；但是 Chrome、Firefox 浏览器网页端直接报错黑屏。这就会出现非常经典的扯皮：后端看 curl 返回正常，认为资源没有问题；前端浏览器报错，判定服务端配置缺失。
同时 CDN 场景下坑点更多：部分 CDN 节点配置不一致，出现部分地区用户播放正常，另一部分地区跨域报错；缓存节点会把不带跨域头的旧响应缓存，即使后端 Nginx 已经修复配置，用户依旧拿到旧缓存结果。很多团队排查跨域只看 M3U8 主索引，漏掉子索引、TS 分片、加密密钥，问题迟迟得不到解决。
在处理各类 HLS 跨域相关故障时，我经常使用 m3u8live.cn 网页调试工具，依托浏览器原生 XHR 请求机制，复现真实跨域报错，快速区分是 Nginx、源站、CDN 配置问题，还是前端业务代码问题。
二、HLS 业务跨域常见典型故障场景
1. 仅 M3U8 索引配置 CORS，TS 分片未配置
现象：M3U8 主索引请求返回完整跨域头，浏览器可以正常拿到索引文本，但是请求 TS 分片时报跨域错误，加载分片被浏览器拦截，视频黑屏转圈。 根因：很多运维只给.m3u8后缀配置响应头，忘记给.ts分片资源增加 CORS 配置。hls.js 通过 XHR 分别请求索引和每一个 TS 分片，两类资源都必须携带跨域头，缺一不可。
2.AES‑128 加密流密钥接口缺少跨域头
现象：M3U8 索引、TS 分片请求正常，请求 #EXT‑X‑KEY 对应的密钥地址报跨域，解密流程中断，播放黑屏。 根因：加密业务只处理音视频分片资源，密钥接口是独立接口，没有同步配置跨域响应头。
3.CDN 节点缓存旧的无跨域头响应
现象：源站 Nginx 已经新增 CORS 配置，清除源站缓存测试正常，公网 CDN 访问依旧报跨域。 根因：CDN 边缘节点缓存了修复之前不带跨域头的旧响应，即便源站已经修复，边缘节点持续返回旧缓存内容，需要刷新 CDN 缓存才能生效。
4. 部分节点配置不一致，区域性偶发跨域报错
现象：部分城市运营商网络播放正常，另外一部分地区浏览器报跨域。 根因：CDN 大量边缘节点，修改配置没有全量下发，一部分节点更新配置，另一部分节点依旧沿用旧配置，造成现象地域分化。
5.OPTIONS 预检请求没有正确处理
现象：浏览器发出 OPTIONS 预检请求，服务端返回 404、403，后续 GET 请求被浏览器拦截。 根因：浏览器对于非简单请求会发送 OPTIONS 预检，Nginx、CDN 没有对 OPTIONS 方法做特殊处理，直接拒绝预检请求，直接触发跨域报错。
三、标准化跨域故障排查流程
第一步，将待测试 M3U8 地址粘贴至网页调试工具，配置业务需要的 Token、Referer 请求头，打开浏览器 F12 控制台与网络面板。复现播放故障，重点观察 M3U8 索引、子索引、TS 分片、密钥接口的响应头。
第二步，区分现象：
- 如果调试工具就出现 CORS 报错，问题锁定源站 Nginx、流媒体服务、CDN 配置；
- 如果调试工具播放完全正常，只有业务页面报跨域，则排查业务页面代理、请求拦截逻辑。
第三步，检查每一类资源的 Response‑Header，确认Access‑Control‑Allow‑Origin、Access‑Control‑Allow‑Methods是否完整存在，同时观察 OPTIONS 预检请求返回状态码。
注意：不能只看 M3U8 主索引，TS 分片、密钥地址同样要检查响应头。
第四步，如果怀疑 CDN 缓存问题，使用不携带缓存的请求参数，或者刷新 CDN 节点缓存之后复测。
四、Nginx 与 CDN 配置最佳实践
五、总结
HLS 的 CORS 跨域故障，很多时候并不是 M3U8 主索引的问题，而是 TS 分片、密钥接口、CDN 缓存、OPTIONS 预检等容易被忽略的环节。curl 命令、VLC 客户端无法模拟浏览器同源安全限制，很容易给开发造成配置已经修复的错觉。借助网页调试工具复现浏览器真实跨域报错，可以快速定位跨域问题归属源站还是 CDN，避免无效调试，解决流媒体业务各类黑屏报错问题。
