在 HTML 视频上加载字幕时出现安全错误

所以我在 HTML5 视频的字幕上遇到了一些意外的行为。

我将我的视频+字幕文件存储在 Google Cloud Storage 上，并且我有一个网络界面来观看电影。

我的服务器为电影和字幕文件生成签名 URL。电影播放正常，并且我可以使用 URL 查看字幕文本内容。然而，使用<track>不起作用：

<track label="my_subtitle_file" src="my_signed_url" srclang="en" kind="subtitles">

在 Firefox 中我收到一个错误：

Security Error: Content at <my site> may not load data from <signed GCS url> 

在 Chrome 中，我得到了一个略有不同的错误，但我想这是同样的问题：

Unsafe attempt to load URL <signed GCS URL> from frame with URL <my site>.
Domains, protocols and ports must match.

我想我could在我的后端创建一个包装端点，它获取文件的内容并为其提供服务。但我想知道，还有其他方法吗？以及为什么要这样做<track>节点有这么严格的限制吗？

edit

我向 GCS 存储桶添加了 CORS 策略：

[
  {
    "origin": ["https://my-domain.com"],
    "responseHeader": ["Content-Type"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

在 GCS 控制台上，我还尝试删除“阻止公共访问设置”。虽然我没有公开这些文件（我仍然想要求预先签名的 URL），但 GCS 似乎有点奇怪，因为你可以在不实际公开的情况下关闭“阻止公开访问”。

为此用例设置 CORS 还不够，因为某些浏览器甚至不尝试发出 HTTP 请求来加载字幕。

因此，要从外部域加载字幕，您需要：

1. 配置 CORS 策略以允许这样做（例如Access-Control-Allow-Origin: *)
2. Add crossorigin="anonymous"归因于你的<video> tag.