Angular嵌入Vimeo视频触发CORS跨域拦截该如何解决？

核心原因 #

Vimeo的播放器地址仅支持直接通过iframe嵌入，不允许跨域发起XMLHttpRequest请求。你当前的报错是因为代码中主动对Vimeo播放器地址发起了Http请求，而非直接将拼接完成的合法地址传入iframe的src属性。

修复步骤 #

• 第一步：修正Vimeo地址赋值逻辑
  直接拼接合法播放器地址赋值给_vimeoUrl，不要通过HttpClient请求该地址，示例：

  // 组件内直接赋值，视频ID替换为你自己的即可
  public _vimeoUrl = 'https://player.vimeo.com/video/548582212';
  

• 第二步：修正安全管道与iframe代码
  你的secure管道用于处理Angular的不安全URL拦截，要确保管道仅通过DomSanitizer标记地址为安全，不要添加额外逻辑，正确管道实现：

  import { Pipe, PipeTransform } from '@angular/core';
  import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
  
  @Pipe({ name: 'secure' })
  export class SecurePipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}
    transform(url: string): SafeResourceUrl {
      return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
  }
  

  移除iframe上多余的async管道（你返回的不是Observable，不需要该管道），修正后的HTML代码：

  <div style="padding:56.25% 0 0 0;position:relative;">
      <iframe [src]="_vimeoUrl | secure" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Untitled"></iframe>
  </div>
  

• 第三步：非公开视频额外配置
  如果你嵌入的是Vimeo私有视频，需要登录Vimeo后台，在视频的设置页找到「嵌入」选项，将http://localhost:4200添加到允许嵌入的域名列表中。
• 本地开发可选代理配置（极端情况使用）
  如果以上操作后仍有跨域问题，可配置Angular本地开发代理，新增proxy.conf.json到项目根目录：

  {
    "/vimeo": {
      "target": "https://player.vimeo.com",
      "changeOrigin": true,
      "pathRewrite": { "^/vimeo": "" }
    }
  }
  

  修改angular.json中serve配置加载代理文件，重启开发服务即可。

内容的提问来源于stack exchange，提问作者Nesan Mano