海洋 CMS 播放器跨域报错怎么解决

海洋 CMS 播放器跨域报错的根本原因是浏览器的同源策略拦下了播放器发出的请求，95% 的情况不需要改海洋 CMS 任何代码，只要在视频资源所在的服务器（Nginx、Apache 或 CDN）补上 Access-Control-Allow-Origin 响应头即可解决；剩下那部分是 iframe 嵌套播放页导致的，改响应头无效，只能换成同域播放页或用 postMessage 通信。

怎么判断是哪一种跨域？先看控制台报错关键字

结论：三种跨域报错的修法完全不同，第一步必须按控制台文案分类，别急着改配置。

按 F12 打开 Console，对号入座：

• 出现 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present —— 这是资源跨域，播放器在请求 m3u8、ts 切片、密钥文件或封面图时被拦，属于服务端响应头问题，可修。
• 出现 Blocked a frame with origin ... from accessing a cross-origin frame —— 这是 iframe 跨域，父页面想读写 iframe 内部 DOM 被禁止，属于浏览器的硬限制，改头无效。
• 出现 Tainted canvases may not be exported —— canvas 被跨域视频污染，只有需要截图、生成封面时才遇到。

看清楚是哪一个，再往下走对应的小节。

m3u8 / ts 跨域报错怎么加响应头？

结论：在资源服务器上给视频相关后缀统一加 CORS 头，并且必须用 always 让它对 206 状态码也生效。

Nginx 加在视频资源所在的 server 或 location 里：

location ~* \.(m3u8|ts|mp4|key|vtt)$ {
    add_header Access-Control-Allow-Origin * always;
    add_header Access-Control-Allow-Methods 'GET, OPTIONS' always;
    add_header Access-Control-Allow-Headers 'Range, Origin' always;
    add_header Access-Control-Expose-Headers 'Content-Length, Content-Range' always;
    if ($request_method = OPTIONS) { return 204; }
}

三个关键点：第一，视频切片返回的是 206 Partial Content 而不是 200，Nginx 的 add_header 默认只在部分状态码下生效，不加 always 就会出现「首页能播、拖动进度条就报错」的怪现象；第二，Access-Control-Expose-Headers 里必须放出 Content-Range，否则播放器调度器读不到切片长度；第三，OPTIONS 预检请求要直接返回 204，不要落到 PHP。

Apache 用户写一行即可：Header set Access-Control-Allow-Origin "*"，放在 .htaccess 或虚拟主机配置的 <FilesMatch "\.(m3u8|ts|mp4)$"> 段里。用 CDN 的话，多数 CDN 控制台有「跨域头设置」开关，打开后回源和边缘节点都会带上。

播放器 video 标签要不要加 crossorigin 属性？

结论：只在你需要 canvas 截图或加载外挂字幕时才加，加了之后服务端必须返回与你站点完全匹配的 Access-Control-Allow-Origin，否则本来能播的反而播不了。

crossorigin="anonymous" 的作用是让浏览器把请求升级为 CORS 请求（带上 Origin 头、不带 Cookie），请求失败时视频直接黑屏。所以先在无该属性的情况下测试，确认能播再加。

加完头还是报错，按什么顺序排查？

结论：八成是缓存了不带头的旧响应，或者响应头重复了，用 curl 一条命令就能验。

curl -I -H "Origin: https://你的站.com" https://资源域名/test.m3u8

检查输出里有没有 Access-Control-Allow-Origin，再确认切片地址同样带头。排查顺序：

1. 响应里出现两个 Access-Control-Allow-Origin（Nginx 和 PHP 各加了一个）——浏览器判定为无效，删掉其中一个。
2. CDN 缓存了配置修改前的响应 —— 刷新该目录缓存，或加版本参数测试。
3. 需要带 Cookie 的场景 —— Access-Control-Allow-Origin 不能写 *，必须写完整域名，同时加 Access-Control-Allow-Credentials: true。
4. 站点是 https 而 m3u8 地址是 http —— 这是混合内容拦截，不是跨域，浏览器会直接阻止，必须统一协议。

iframe 播放页跨域怎么绕开？

结论：父页面永远拿不到跨域 iframe 里的播放器实例，唯一正路是把播放页放在同域，或用 postMessage 做单向通信。

具体做法：把第三方解析接口通过 Nginx 反向代理成自己域名下的路径，例如 location /player/ { proxy_pass https://第三方接口; }，这样浏览器眼里是同域请求，天然没有跨域；或者父页面 iframe.contentWindow.postMessage(data, '*') 发消息，播放页里监听 message 事件接收。海洋 CMS 后台里如果填的是第三方域名的播放器地址，跨域请求就是必然结果，换成同域代理路径最省事。

总结一句：先看控制台报错分类，资源类跨域就去资源服务器加带 always 的 CORS 头并确认 206 响应带头，iframe 类跨域改头没用、只能同域代理或 postMessage。改完用 curl 验证响应头，再清一次 CDN 缓存，基本就通了。