浏览器因cors策略拦截m3u8或.ts跨域请求导致黑屏，需在nginx中为.m3u8和.ts文件配置access-control-allow-origin等响应头，并验证每个环节响应头是否完整生效。
网页前端加载远程服务器上的m3u8视频时播放器黑屏、控制台报“Access to XMLHttpRequest at 'xxx.m3u8' from origin 'yyy' has been blocked by CORS policy”，说明浏览器因同源策略拦截了对m3u8清单文件或其引用的.ts分片的跨域请求，必须在服务端响应头中显式声明跨域许可。
确认是否真为跨域问题
打开浏览器开发者工具→Network标签页→刷新页面→筛选.m3u8或.ts请求→查看对应请求的Response Headers中是否存在Access-Control-Allow-Origin字段。若缺失，且Status为200但Preview为空或显示乱码，基本可锁定为CORS问题；若Status为0或Failed，则可能是HTTPS混合内容、防盗链或网络中断所致，需另查。
注意：【仅检查.m3u8文件不够，必须同时验证至少一个.ts分片的响应头】，因为HLS播放器会先取.m3u8，再按其内容逐个请求.ts，任一环节缺CORS头都会中断播放。
Nginx精准配置跨域响应头
登录服务器，编辑Nginx配置文件（通常为/etc/nginx/nginx.conf或站点配置所在/etc/nginx/conf.d/*.conf），在对应视频资源的location块内添加以下指令：
第一步：明确匹配m3u8和ts文件类型，避免全局污染
```nginx
location ~ \.(m3u8|ts)$ {
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "GET, OPTIONS";
add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range";
add_header Access-Control-Expose-Headers "Content-Length,Content-Range";
add_header Access-Control-Max-Age 2592000;
# 处理预检请求
if ($request_method = OPTIONS) {
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "GET, OPTIONS";
add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range";
add_header Access-Control-Max-Age 2592000;
add_header Content-Type "text/plain; charset=utf-8";
add_header Content-Length 0;
return 204;
}
}
第二步：确保该location块覆盖实际视频路径。例如视频URL为https://cdn.example.com/videos/abc.m3u8，则上述location必须置于server块内且能匹配/videos/路径，或直接写成location /videos/ { ... }并把add_header放在内部。
第三步：重载Nginx配置使生效 → sudo nginx -t && sudo nginx -s reload。这一步不可跳过，否则修改无效。
生产环境安全加固（可选）
方法一：限制允许来源，替换*为具体域名
add_header Access-Control-Allow-Origin "https://your-frontend.com";
方法二：支持多域名时用变量动态匹配（需Nginx 1.13.9+）
map $http_origin $cors_origin {<br> default ""; <br> "https://your-frontend.com" "https://your-frontend.com";<br> "https://staging.your-frontend.com" "https://staging.your-frontend.com";<br>}<br>add_header Access-Control-Allow-Origin $cors_origin;
注意：【若启用多域名，必须同时在Access-Control-Allow-Headers中保留Origin字段】，否则部分浏览器预检会失败。
验证配置是否生效
在浏览器地址栏直接访问一个.ts分片URL（如https://cdn.example.com/videos/seg1.ts）→右键检查→Network→点击该请求→Headers→Response Headers→确认存在Access-Control-Allow-Origin且值为你设置的域名或星号。
curl -I https://cdn.example.com/videos/test.m3u8 | grep "Access-Control-Allow-Origin"
返回非空结果即表示配置已生效。
