Ionic 5+Angular中HTML5 video的track标签跨域安全问题求助

首先得明确：你遇到的不是Angular DomSanitizer的问题，而是浏览器原生的**同源策略（Same-Origin Policy）**限制。DomSanitizer只是用来处理Angular的安全上下文、防止XSS注入，但它绕不开浏览器对跨域资源（尤其是video track这类资源）的访问限制——浏览器要求视频和字幕的域名、协议、端口必须完全匹配，除非目标服务器允许跨域访问。

下面给你几个可行的解决办法，按推荐优先级排序：

1. 配置字幕服务器的CORS策略 #

这是最直接的解决方案，只要你有权限操作字幕所在的服务器（https://www.blablbalbla.de），在服务器上添加CORS响应头，允许你的前端域名（比如开发环境的http://localhost，生产环境换成实际域名）访问字幕资源。

比如：

• 如果是Nginx服务器，在配置中添加：

  add_header Access-Control-Allow-Origin http://localhost;
  add_header Access-Control-Allow-Methods GET;
  

• 如果是后端框架（比如Node.js/Java/Python），在返回字幕文件的接口中设置响应头：Access-Control-Allow-Origin: http://localhost

配置完成后，你原来的DomSanitizer代码用bypassSecurityTrustResourceUrl处理字幕URL就可以正常工作了。

2. 使用Angular代理转发请求 #

如果没法修改字幕服务器的配置，可以通过Angular的代理功能，将前端的字幕请求转发到目标服务器，这样前端请求的是同源地址，绕开跨域限制。

步骤如下：

1. 在项目根目录创建proxy.conf.json文件，内容如下：

   {
     "/subtitle-proxy": {
       "target": "https://www.blablbalbla.de",
       "secure": false,
       "changeOrigin": true,
       "pathRewrite": {
         "^/subtitle-proxy": ""
       }
     }
   }
   

2. 修改angular.json中的serve配置，添加代理文件引用：

   "projects": {
     "your-app-name": {
       "architect": {
         "serve": {
           "options": {
             "proxyConfig": "proxy.conf.json"
           }
         }
       }
     }
   }
   

3. 修改你的字幕URL和sanitize函数：
   • 把原字幕URL https://www.blablbalbla.de/blbalblbalba.xml 改成 /subtitle-proxy/blbalblbalba.xml
   • 用bypassSecurityTrustResourceUrl处理这个代理地址：

     public sanitizeURL(url) {
       return this.DOMSANI.bypassSecurityTrustResourceUrl(url);
     }
     

4. 重启Angular开发服务器，代理就会生效了。

3. 嵌入静态字幕文件到项目中 #

如果字幕文件是静态的、不会频繁更新，可以直接把字幕文件下载下来，放到项目的assets文件夹里，然后用相对路径引用：

<video>
  <track label="Deutsch" kind="subtitles" srclang="de" src="assets/subtitles/de.xml">
</video>

这种方法完全避免了跨域问题，不需要任何额外配置，适合不需要动态加载字幕的场景。

再补充一句：之前你尝试的各种DomSanitizer方法无效，是因为它们解决的是Angular的安全信任问题，而不是浏览器的跨域限制——浏览器根本不会去请求跨域的track资源，不管你有没有信任这个URL。

内容的提问来源于stack exchange，提问作者William Wallace