解决HTML中track标签由于跨域导致字幕无法加载的常见错误-html教程-PHP中文网

标签的src跨域请求被拦截时，控制台无js错误但network中.vtt请求状态为“cancelled”或0字节响应，根本原因是其作为独立http请求受同源策略限制；file://协议下必失败，须用http服务（如live server）；生产环境需服务端配置cors及text/vtt mime类型。

解决html中track标签由于跨域导致字幕无法加载的常见错误

track src 跨域请求被浏览器拦截的典型表现

控制台出现类似 Failed to load resource: No 'Access-Control-Allow-Origin' header 或 net::ERR_BLOCKED_BY_RESPONSE 的错误，但视频照常播放、字幕菜单为空——这不是 JS 报错，而是 Network 面板里 zh.vtt 请求状态为“cancelled”或 0 字节响应。根本原因是：<track></track> 的 src 是一次独立的跨域 HTTP 请求，和 <img> 或 <script></script> 一样受同源策略约束。

本地开发时 file:// 协议下 track 永远失败

双击 HTML 文件用 file:// 打开，哪怕 zh.vtt 和 HTML 在同一文件夹，所有现代浏览器（Chrome/Firefox/Edge/Safari）都会静默拒绝加载 .vtt。这不是 bug，是安全策略强制行为。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

必须启动本地 HTTP 服务：比如 python3 -m http.server 8000，然后访问 http://localhost:8000/test.html
VS Code 用户可直接装 Live Server 插件，右键 HTML → “Open with Live Server”
切勿依赖“拖进浏览器”这种操作，它等于主动触发跨域限制

生产环境跨子域或 CDN 字幕需服务端配 CORS

视频在 https://example.com，字幕放在 https://cdn.example.com/zh.vtt，浏览器会发预检请求（OPTIONS），若响应头缺失 Access-Control-Allow-Origin，就直接拦掉。

Nginx 配置示例：

location ~ \.vtt$ {
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Content-Type' 'text/vtt';
}

Apache 需启用 mod_headers 并加 Header set Access-Control-Allow-Origin "*"
注意：Safari 对通配符 * 有额外限制，若需带 cookie，必须指定确切域名，不能用 *

src 路径写错导致“看似跨域”实为 404

路径大小写错误（ZH.VTT vs zh.vtt）、多写斜杠（//sub/zh.vtt）、漏写扩展名（zh）等，会导致服务器返回 404，而某些 CDN 或 Nginx 默认不返回 CORS 头给 404 响应——于是你看到的错误仍是跨域相关，但根源是路径不存在。

始终在 Network 面板里点开 zh.vtt 请求，看 Status 是否为 200，Response 是否有实际内容
检查服务器是否配置了 text/vtt MIME 类型，Safari 尤其敏感；Nginx 需在 types 块中加 text/vtt vtt;
路径一律用相对路径（如 ./sub/zh.vtt）或完整 HTTPS URL，避免协议相对路径（//cdn/zh.vtt），后者在 HTTP 页面里会降级为 HTTP，触发混合内容拦截

跨域问题最麻烦的地方在于：它不报 JS 错误、不抛异常、不提示用户，只让字幕彻底消失。排查时必须盯死 Network 面板里的 .vtt 请求本身，而不是只看 console。