Vimeo设置指定域名嵌入后在Heroku应用报错如何解决

问题背景 #

将Vimeo平台的嵌入视频链接部署到自有Heroku应用时触发嵌入权限报错，无法正常加载播放。
当前Vimeo侧视频配置如下：

• 隐私设置：Hide from Vimeo（不在Vimeo平台公域展示）
• 嵌入权限：Specific domains（仅指定授权域名可嵌入）
  已尝试加入白名单的域名列表：

1. my-site.herokuapp.com
2. herokuapp.com
3. heroku.com
   上述配置完成后视频仍无法正常加载，按以下步骤逐一排查即可定位问题：

排查解决步骤 #

• 修正白名单域名匹配规则
  Vimeo域名白名单默认不支持主域名自动匹配所有子域名，即单独添加herokuapp.com不会覆盖my-site.herokuapp.com这类子域名；同时白名单配置不要带协议头（http/https）、端口号、路径后缀，只保留纯域名格式。如果你的Heroku应用绑定了自定义域名，必须将自定义域名（含www/非www两个访问变体）同步加入白名单，添加时确认没有输入多余空格、拼写错误。
• 校验站点Referrer策略
  如果Heroku应用配置了Referrer-Policy: no-referrer响应头，Vimeo服务器接收嵌入请求时拿不到来源域名信息，会直接判定为未授权访问拦截。
  排查方式：打开浏览器开发者工具，切换到Network面板，筛选Vimeo域名的视频请求，查看请求头中Referer字段是否为空、是否与白名单配置的域名一致。
  修复方式：将站点全局Referrer策略调整为strict-origin-when-cross-origin；如果不想修改全局配置，可直接给Vimeo嵌入的iframe标签添加referrerpolicy="strict-origin-when-cross-origin"属性，单独为视频嵌入请求配置符合要求的Referrer规则。
• 等待配置生效并清理缓存
  Vimeo域名白名单修改后最长有15分钟的生效延迟，修改完成后不要立刻测试，先清理浏览器缓存、站点静态资源缓存，也可以打开浏览器无痕模式访问验证，避免旧缓存导致的拦截。
• 核对视频权限归属
  如果使用Vimeo团队账号管理视频，需确认白名单配置在视频所属的对应账号/项目下，不同子账号、个人空间的权限配置不互通。
• 排查代理层头信息改写问题
  如果Heroku应用前端套了CDN、WAF类代理服务，需确认代理没有配置剥离/改写Referer请求头的规则，避免Vimeo拿到的来源域名与白名单配置不一致。

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