HTML中Video标签的跨域资源共享（CORS）配置实战-html教程-PHP中文网

video标签加crossorigin属性仅是声明走cors流程，根本原因在于服务端未返回access-control-allow-origin响应头，导致canvas被污染而无法getimagedata或todataurl；必须前端设置crossorigin且服务端精确返回对应cors头才生效。

html中video标签的跨域资源共享（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 属性不会触发重请求，浏览器仍按旧模式加载。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

错误写法：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></track>` 字幕跨域也要配 `crossorigin`

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

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

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