HTML中Video标签的跨域资源共享（CORS）配置实战

Video标签加crossorigin属性仅是声明走CORS流程，根本原因在于服务端未返回Access-Control-Allow-Origin响应头，导致canvas被污染而无法getImageData或toDataURL；必须前端设置crossorigin且服务端精确返回对应CORS头才生效。

Video 标签加 crossorigin 属性只是“告诉浏览器走 CORS 流程”，不配服务端响应头就等于白设——哪怕视频能播，JS 也读不了帧、截不了图、拿不到 videoWidth。

为什么 crossorigin 加了视频还是不能用 canvas 绘制

根本原因不是前端没写对，而是服务端没返回 Access-Control-Allow-Origin。浏览器看到 crossorigin="anonymous"，就会发带 Origin 头的请求；如果响应里没有匹配的 Access-Control-Allow-Origin，canvas.drawImage() 之后调 ctx.getImageData() 就会直接抛 SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.。

• 即使视频画面正常播放，只要没配响应头，像素级操作一律被拦
• 若用了 crossorigin="use-credentials"，服务端还必须同时返回 Access-Control-Allow-Credentials: true，且 Access-Control-Allow-Origin 不能是 *，得是精确域名（如 https://myapp.com）
• 服务端返回了 Access-Control-Allow-Origin: https://myapp.com，但页面实际跑在 http://localhost:3000 → 不匹配，照样失败

crossorigin 必须在 src 赋值前设置才生效

动态设置时顺序错是高频翻车点。DOM 元素一旦开始加载资源，再改 crossOrigin 属性不会触发重请求，浏览器仍按旧模式加载。

• 错误写法：video.src = "https://cdn.example.com/vid.mp4"; video.crossOrigin = "anonymous";（已发起非 CORS 请求）
• 正确写法：video.crossOrigin = "anonymous"; video.src = "https://cdn.example.com/vid.mp4";
• 用 setAttribute 也一样：必须先 el.setAttribute("crossorigin", "anonymous")，再设 src
• Vue/React 中绑定 :src 时，也要确保 crossorigin 属性在组件挂载或 src 更新前就存在

对象存储（OSS/OBS/DCDN）上视频的 CORS 配置要点

如果你的视频托管在阿里云 OSS、华为云 OBS 或 DCDN，CORS 规则必须在控制台里配，前端加 crossorigin 只是配合动作。

立即学习“前端免费学习笔记（深入）”；

• “允许的来源”填具体协议+域名，比如 https://myapp.com 或 http://localhost:3000；别填 *（除非不用凭据）
• “允许的方法”至少勾选 GET（视频流是 GET 请求），预检需要 OPTIONS，所以也要开
• “允许的头域”如果前端没加自定义 header，可留空；但如果用了 Authorization 或 X-Api-Key，这里必须显式列出
• DCDN 场景下，注意它可能覆盖源站（如 OSS）的 CORS 响应头——要优先检查 DCDN 出站规则是否生效

<track> 字幕跨域也要配 crossorigin

视频本身能播，但外挂 VTT 字幕加载后无法解析？大概率是 <track> 标签漏了 crossorigin。字幕文件和视频一样受同源策略限制，JS 读取 track.track.cues 会失败。

• 写法示例：<track kind="subtitles" src="https://cdn.example.com/subs.vtt" srclang="zh" crossorigin="anonymous">
• 服务端对 .vtt 文件同样要返回 Access-Control-Allow-Origin
• Chrome 对未配 CORS 的跨域字幕会静默失败，不报错也不显示，排查时容易忽略

最容易被跳过的其实是字幕和预览缩略图——它们都依赖 crossorigin + 服务端头，但开发者常只盯着 <video> 标签本身。配完记得用浏览器 Network 面板看响应头，确认每个跨域资源（mp4、vtt、jpg）都带上了正确的 Access-Control-Allow-Origin。