track元素跨域报错本质是服务端未返回匹配的Access-Control-Allow-Origin响应头，而非HTML写法问题；浏览器对track加载的WebVTT文件执行严格CORS校验，需服务端在所有状态码（含404）下精确返回对应Origin的CORS头，且启用凭据时禁止使用通配符*。
track元素跨域报错本质是CORS校验失败，不是HTML写法问题
浏览器对 <track></track> 加载的 WebVTT 字幕文件执行严格 CORS 校验——哪怕只是显示字幕，只要 <video></video> 是跨域的且 <track></track> 的 src 指向不同源，就必须走完整 CORS 流程。单独给 <track></track> 加 crossorigin 属性无效（该标签根本不支持此属性），错误根源永远在服务端没返回匹配的 Access-Control-Allow-Origin 响应头。
track src 请求必须带 Origin 头，服务端要返回对应 Access-Control-Allow-Origin
当 <track src="https://cdn.example.com/subs/en.vtt"></track> 被加载时，浏览器会自动带上 Origin 请求头（如 Origin: https://my-site.com）。服务端响应必须包含值精确匹配该源的 Access-Control-Allow-Origin，否则直接拦截，控制台只报 Failed to load resource 或空白错误，Network 面板里看不到响应体。
- 不能用通配符
*：除非你完全不传凭据（即不涉及 Cookie、HTTP 认证等），否则Access-Control-Allow-Origin: *会被浏览器拒绝 - 若字幕服务需要鉴权（比如签名校验、Token），服务端必须同时设
Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin必须是具体域名（如https://my-site.com），不能是* - 确保响应头在所有 HTTP 状态码下都返回（包括 404）：CDN 或对象存储（如 S3、OSS）常默认只对 200 响应加 CORS 头，404 时缺失会导致调试困难
Nginx / CDN / 对象存储怎么配 track 所需的 CORS 头
WebVTT 文件通常托管在静态资源服务上，而非应用后端，所以配置位置和方式与 API 不同：
- Nginx：在对应 location 块中显式添加，注意判断
$http_origin避免预检失败：location ~ \.vtt$ { add_header 'Access-Control-Allow-Origin' 'https://my-site.com' always; add_header 'Access-Control-Allow-Credentials' 'true' always; add_header 'Access-Control-Allow-Methods' 'GET' always; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always; } - AWS S3：必须在 Bucket 的 CORS 配置里添加规则，
AllowedOrigins填具体域名，勾选AllowedHeaders: *和ExposeHeaders: Content-Length,Content-Range - Cloudflare R2 / OSS：检查控制台是否启用“CORS 规则”，规则中
AllowedOrigin不能写*（尤其启用了 Token 鉴权时）
验证 track 是否真正跨域成功的关键动作
别只看视频能不能播——字幕加载失败可能静默发生。必须手动验证：
立即学习“前端免费学习笔记（深入）”；
- 打开 Network 面板，过滤
vtt，点击该请求 → 查看 Request Headers 是否含Origin；Response Headers 是否含Access-Control-Allow-Origin且值匹配当前页面源 - 如果字幕文件带查询参数（如
en.vtt?version=2），确认 CDN 缓存策略是否透传了所有响应头（部分 CDN 默认不缓存带参数的请求，或忽略 CORS 头） - 用
curl -I -H "Origin: https://my-site.com" https://cdn.example.com/subs/en.vtt直接测试服务端响应，避免浏览器缓存干扰 -
<track></track>的kind（如subtitles）不影响 CORS 行为，但若用kind="metadata"且 JS 动态读取内容，仍需同样配头
最容易被忽略的是：WebVTT 文件服务器往往和主站分离，运维同学容易只配 API 接口的 CORS，而忘记静态资源服务。一旦漏配，字幕就彻底失效，且无明确报错提示。
