加载 VTT 文件时出现跨域错误

我刚开始在 HTML 5 中使用音频标签，并且想要构建一个播放器。我想在轨道标签中使用 VTT 文件进行测试，看看隐藏式字幕如何工作。

这是我的代码：

<audio controls>
    <source src="myaudio.mp3" type="audio/mpeg">
    <track kink="caption" src="myaudio.vtt" srclang="en" label="English">
</audio>

根据我读到的内容，跟踪器应该适用于音频和视频，从可访问性的角度来看，这是有意义的。没有意义的是我尝试加载它时出现的错误：

"Text track from origin 'file://' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'null' is therefore not allowed access."

在查找 crossorigin 属性时，我收到很多关于 CORS 以及“匿名”和“用户证书”的预期值的令人困惑的文章。尝试任一结果都会导致类似的错误。

关于为什么这行不通的任何想法？

这是一篇旧帖子，但我在谷歌搜索时看到的第一个帖子Text track from origin 'SITE_HOSTING_TEXT_TRACK' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'SITE_HOSTING_PAGE' is therefore not allowed access.

OP 似乎在本地遇到了这个问题，他可以通过禁用 Chrome 的网络安全来解决这个问题，如上所示。但是，当用户从不同的域访问他们的文本轨道时，更经常会看到这种情况。要在生产环境中为所有用户修复该问题，您需要做两件事：

1. 将正确的 CORS 标头添加到托管 VTT 文件的站点。
2. Add the crossorigin="anonymous"属性到您网站的音频/视频元素。

如果您无权访问托管视频文件的网站，您可能会陷入困境。但如果你这样做，你应该添加标题Access-Control-Allow-Origin:'*'。我在 Node/Express 服务器上处理它，如下所示：

   var app = express()
    app.use(function (req, res, next) {
      res.header('Access-Control-Allow-Origin', '*')
      res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
      next()
    })

音频/视频元素是一个更容易修复的方法。在您网站的 HTML 页面中，添加以下 crossorigin 属性。

<audio controls crossorigin="anonymous">
    <source src="myaudio.mp3" type="audio/mpeg">
    <track kind="caption" src="my_file_hosted_on_a_different_domain.vtt" srclang="en" label="English">
</audio>

我希望这个答案对某人有所帮助...这是一个需要解决的烦人问题。