Ionic 3无法播放部分Vimeo视频，如何设置Referer请求头？

我之前处理过类似的场景，核心问题确实是Ionic WebView默认发送的Referer为http://localhost/，不符合Vimeo视频隐私设置中允许的域名规则（你的Web端域名是被授权的，但localhost不是）。以下是几个可行的解决方案，按推荐程度排序：

方法一：切换到IFrame嵌入并控制Referrer策略 #

这个方法和你Web端的实现逻辑最接近，通过IFrame嵌入Vimeo播放器，并利用referrerpolicy属性控制请求头，同时保持Angular的安全URL处理：

1. 修改页面模板：在你的视频播放页面模板中添加IFrame标签，指定referrerpolicy属性：

<iframe 
  [src]="safeVimeoUrl" 
  referrerpolicy="strict-origin-when-cross-origin"
  id="player_vimeo" 
  frameborder="0" 
  allow="autoplay; fullscreen"
  style="width:100%; height:100vh;"
></iframe>

2. 更新组件逻辑：在ngOnInit中提取视频ID，生成安全的Vimeo播放器URL（和Web端一致）：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-video-link-player-vimeo',
  templateUrl: './video-link-player-vimeo.page.html',
  styleUrls: ['./video-link-player-vimeo.page.scss'],
})
export class VideoLinkPlayerVimeoPage implements OnInit {
  safeVimeoUrl: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    console.log('video-link-player-vimeo page .... ngOnInit()');
    let videoId: string;

    // 从href中提取Vimeo视频ID（假设href格式为https://vimeo.com/xxxxxx）
    if (this.isCourse) {
      videoId = this.conteudoVideoDetail.data.href.split('/').pop() || '';
    } else {
      videoId = this.trailContent.data.href.split('/').pop() || '';
    }

    // 生成Vimeo播放器URL并标记为安全资源
    const rawUrl = `//player.vimeo.com/video/${videoId}`;
    this.safeVimeoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(rawUrl);
  }
}

referrerpolicy的取值可以根据你的需求调整：

• strict-origin-when-cross-origin：跨域时发送源地址
• 如果你需要强制匹配Web端域名的Referer，更推荐下方的InAppBrowser方法。

方法二：使用InAppBrowser加载播放器并自定义Referer头 #

这个方法通过Cordova的InAppBrowser插件打开Vimeo播放器，直接指定自定义的Referer头，完全匹配Web端的请求规则：

1. 安装InAppBrowser插件：

ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

2. 更新组件逻辑：

import { Component, OnInit } from '@angular/core';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

@Component({
  selector: 'app-video-link-player-vimeo',
  templateUrl: './video-link-player-vimeo.page.html',
  styleUrls: ['./video-link-player-vimeo.page.scss'],
})
export class VideoLinkPlayerVimeoPage implements OnInit {

  constructor(private iab: InAppBrowser) {}

  ngOnInit() {
    console.log('video-link-player-vimeo page .... ngOnInit()');
    let videoId: string;

    if (this.isCourse) {
      videoId = this.conteudoVideoDetail.data.href.split('/').pop() || '';
    } else {
      videoId = this.trailContent.data.href.split('/').pop() || '';
    }

    const vimeoPlayerUrl = `https://player.vimeo.com/video/${videoId}`;
    // 替换成你的Web端正式域名
    const webAppReferer = 'https://your-web-app-domain.com';

    // 打开InAppBrowser并设置自定义Referer头
    const browser = this.iab.create(vimeoPlayerUrl, '_blank', {
      headers: {
        'Referer': webAppReferer
      },
      location: 'no', // 隐藏地址栏
      fullscreen: 'yes',
      hardwareback: 'yes' // 允许返回键关闭
    });

    // 可选：监听页面关闭事件
    browser.on('exit').subscribe(() => {
      // 页面关闭后的逻辑，比如返回上一页
    });
  }
}

这个方法能100%模拟Web端的Referer请求头，是最可靠的生产环境解决方案。

方法三：临时修改Vimeo视频隐私设置（仅测试用） #

如果只是临时测试需要，可以修改Vimeo视频的嵌入权限，允许localhost访问：

• 登录你的Vimeo账号，找到目标视频
• 进入「设置」→「隐私」→「嵌入」
• 选择「仅允许特定域名嵌入」，添加http://localhost和你的Web端域名
• 保存设置

⚠️ 注意：这个方法不适合生产环境，因为localhost是公共的，任何本地运行的应用都能嵌入你的视频，存在安全风险。

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