Angular5允许Google Storage跨域下载及VG播放器字幕加载问题

一、修复Videogular2加载.vtt字幕的跨域错误 #

你碰到的这个错误核心是跨域资源共享（CORS）限制：浏览器要求字幕文件和当前页面同源，或者承载字幕的媒体元素（也就是video标签）必须带上crossorigin属性，同时Google Cloud Storage的CORS规则要允许你的源访问。

具体解决步骤：

1. 给Videogular的video元素添加crossorigin属性
   在你的Angular模板里，找到Videogular的vg-player或者内部的video标签，加上crossorigin="anonymous"（如果你的存储需要身份验证，就用use-credentials）。示例代码如下：

   <vg-player>
     <video #media [vgMedia]="media" crossorigin="anonymous" controls>
       <source src="你的视频资源地址" type="video/mp4">
       <track kind="subtitles" label="中文" src="https://storage.googleapis.com/你的存储桶名/字幕文件.vtt" srclang="zh" default>
     </video>
   </vg-player>
   

   划重点：crossorigin属性必须加在承载媒体的video元素上，不是track标签本身。

2. 配置Google Cloud Storage的CORS规则
   就算加了crossorigin，如果Cloud Storage没允许你的源（比如本地开发的http://localhost:4200，生产环境要换成你的正式域名），还是会报错。需要给存储桶设置CORS策略：

   • 先创建一个JSON配置文件（比如命名为cors-config.json），内容如下：

     [
       {
         "origin": ["http://localhost:4200", "https://你的正式域名.com"],
         "method": ["GET"],
         "responseHeader": ["Content-Type", "Access-Control-Allow-Origin"],
         "maxAgeSeconds": 3600
       }
     ]
     

   • 用gcloud命令行工具更新存储桶的CORS规则：

     gsutil cors set cors-config.json gs://你的存储桶名称
     

   配置完成后，Cloud Storage就会允许你的源通过GET请求访问包括.vtt在内的资源了。

二、Angular5中从Google Cloud Storage跨域下载文件的方案 #

根据文件是否需要身份验证，有两种常用实现方式：

方式1：公开文件直接下载（无需身份验证） #

如果你的存储桶文件是公开可读的，直接创建下载链接就行，同时要确保存储桶的CORS规则允许你的源：

• 在组件模板里加个下载按钮：

  <button (click)="downloadPublicFile()">下载公开文件</button>
  

• 在组件类里实现下载逻辑：

  downloadPublicFile() {
    const fileUrl = 'https://storage.googleapis.com/你的存储桶名/目标文件.pdf';
    const a = document.createElement('a');
    a.href = fileUrl;
    a.download = '自定义文件名.pdf';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
  

方式2：私有文件下载（需要身份验证） #

如果文件是私有的，得先通过Google Cloud的身份验证获取临时签名URL，再进行下载：

1. 后端生成签名URL（强烈推荐，因为前端暴露密钥不安全）
   你需要一个后端服务（比如Node.js、Python），用Google Cloud SDK生成带有效期的签名URL，前端从后端拿到这个URL后再下载。
2. 前端通过HttpClient下载
   如果必须在前端处理（不推荐，会暴露服务账号密钥），可以借助file-saver工具包实现：

   import { HttpClient } from '@angular/common/http';
   import { saveAs } from 'file-saver'; // 先安装：npm install file-saver --save
   
   constructor(private http: HttpClient) {}
   
   async downloadPrivateFile() {
     // 先从后端接口获取签名URL
     const signedUrl = await this.http.get('/api/get-signed-url').toPromise();
     // 下载文件并保存
     this.http.get(signedUrl, { responseType: 'blob' }).subscribe(blob => {
       saveAs(blob, '私有文件.pdf');
     });
   }
   

   同时要确保后端接口的CORS规则允许你的源访问，并且签名URL的有效期设置合理。

内容的提问来源于stack exchange，提问作者Developer Team