video跨域加载失败的根本原因是像素数据被标记为“污染”，禁止JS读取；需服务端配置CORS头（含Access-Control-Allow-Origin、Allow-Headers: Range、Expose-Headers: Content-Range），前端video标签必须设crossorigin="anonymous"且在src前设置，同时确保视频触发loadeddata事件后再操作canvas。
为什么 video 元素跨域加载会失败
浏览器对 video 的跨域资源有严格限制：当视频文件（如 MP4、WebM）托管在不同源（协议、域名、端口任一不同）的服务器上，且服务端未显式允许跨域访问时，video 元素虽能加载并播放，但调用 video.captureStream()、读取 video.videoWidth/video.videoHeight、或使用 canvas.drawImage() 绘制帧时会触发 SecurityError: The canvas has been tainted by cross-origin data 错误。根本原因不是 video 本身无法播放，而是其像素数据被标记为“污染”，禁止 JS 读取。
服务端必须设置 CORS 响应头
这是最基础且不可绕过的前提。仅靠前端加 crossorigin 属性无效，服务端必须返回合法的 CORS 头。常见错误是只加了 Access-Control-Allow-Origin: *，却忽略了 Access-Control-Allow-Headers 或预检（OPTIONS）处理不完整。
- 静态资源（如 Nginx）需配置：
location ~ \.(mp4|webm|ogg)$ { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Range'; add_header 'Access-Control-Expose-Headers' 'Content-Range'; } - 关键点：
Range请求头必须被允许（视频拖动依赖分片请求），Content-Range必须暴露（否则浏览器无法解析分块响应） - 若视频需带认证（如 token），
Access-Control-Allow-Origin不能为*，必须指定具体域名，并添加Access-Control-Allow-Credentials: true
crossorigin 不是布尔属性，值必须明确指定，否则等同于未设置。常见错误是写成 或 （后者正确但易被忽略引号）。
- 推荐写法：
-
anonymous表示不发送 Cookie/认证信息；若需携带凭证，改用use-credentials，但此时服务端Access-Control-Allow-Origin不能为* - 该属性必须在
src设置前就存在，动态设置无效（例如先创建video元素再赋值crossorigin，再设src，仍会失败）
JS 中读取跨域视频帧仍报错？检查三个隐性条件
即使服务端头和 HTML 属性都正确，canvas.drawImage(video, ...) 仍可能报错，原因常被忽略：
立即学习“前端免费学习笔记（深入）”；
- 视频必须已触发
loadeddata或canplay事件后再绘制——过早操作会导致 canvas 被污染 - 若视频使用了 DRM（如 Widevine），即使 CORS 正确，像素数据也默认不可读，无通用前端绕过方案
- 某些 CDN（如 Cloudflare）默认开启“威胁防护”，会拦截带
Range头的请求，需在规则中放行视频分片请求
真正难的不是加个属性或配个头，而是确认整个链路——从 DNS 解析、CDN 缓存策略、服务端中间件（如 Express 的 CORS 中间件是否覆盖静态路径）、到浏览器 DevTools 的 Network 面板里每个视频请求的响应头是否完整——全部一致且生效。
