Vite.js应用嵌入YouTube视频时出现权限策略头错误

问题场景 #

在Vite.js开发的应用中，通过TMDB API获取视频链接后用iframe嵌入YouTube视频时，出现两个错误：

• Error with permission policy header: unrecognized feature: ch-ua-form-factor
• Access to XMLHttprequest

移除iframe标签后错误消失，所用嵌入代码如下：

<iframe width="1000" height="550"
    src="https://www.youtube.com/embed/key" allow="autoplay; fullscreen;">
</iframe>

错误分析与修复方案 #

1. 权限策略头不识别ch-ua-form-factor #

该错误源于当前环境的Permission-Policy响应头包含了非标准的ch-ua-form-factor特性，而YouTube嵌入页面不兼容此配置。

修复步骤：

• 打开Vite配置文件（vite.config.js/vite.config.ts），修改开发服务器响应头，仅保留标准支持的权限策略：

export default defineConfig({
  server: {
    headers: {
      'Permission-Policy': 'autoplay=*, fullscreen=*, geolocation=(), microphone=(), camera=()'
      // 移除ch-ua-form-factor相关配置，仅保留业务需要的标准特性
    }
  }
})

• 生产环境部署时，需在服务器（Nginx、Apache等）配置中同步修改响应头，删除ch-ua-form-factor的权限声明。

2. XMLHttpRequest访问错误 #

此问题通常是iframe加载时的跨域请求被浏览器拦截，或Vite开发服务器的CORS配置存在问题。

修复步骤：

• 在Vite配置中开启或调整CORS设置：

export default defineConfig({
  server: {
    cors: true,
    // 也可按需配置更具体规则
    // cors: {
    //   origin: '*',
    //   methods: ['GET', 'POST']
    // }
  }
})

• 同时检查YouTube嵌入链接有效性，确认key为正确的视频ID，且网络环境未限制YouTube嵌入服务。

额外排查点 #

若修改配置后问题仍存在，可尝试：

• 清除浏览器缓存，强制刷新页面（Ctrl+Shift+R）
• 临时禁用浏览器广告拦截、隐私类扩展，排查是否为扩展阻止iframe请求

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