React应用嵌入YouTube视频报错求助：跨域与权限策略问题

在React应用中嵌入YouTube视频时，控制台出现两个错误：

1. Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost:3000').
2. Error with Permissions-Policy header: Unrecognized feature: 'ch-ua-form-factor'.

仅通过电影数据库API获取视频密钥展示视频，相关代码如下：

import React from 'react'
import './Video.css'
import YouTube from 'react-youtube';


export default function Video(props) {
  
  const opts = {
    height: '390',
    width: '640',
    playerVars: {
      // https://developers.google.com/youtube/player_parameters
      autoplay: 0,
    },
  };

  return (
    <div className='videos'>
        {props.videosList.results.map((element) => {
            if(element.type === "Trailer"){
                return <YouTube videoId={`${element.key}`} opts={opts} key={element.id}/>;
            } else {
                return null
            }
        })
        }
    </div>
  )
}

针对第一个错误 #

这个错误是因为react-youtube组件默认使用https://www.youtube.com作为postMessage的目标origin，但你的开发环境是http://localhost:3000，两者不匹配导致的。

解决方法是给<YouTube>组件添加origin属性，设置为当前页面的origin：

// 修改后的YouTube组件调用
<YouTube 
  videoId={`${element.key}`} 
  opts={opts} 
  key={element.id}
  origin={window.location.origin} // 添加这一行
/>

这样postMessage的目标origin就会和当前页面的origin一致，错误会消失。

针对第二个错误 #

这个是浏览器兼容性警告，ch-ua-form-factor是Chrome浏览器的特定特性，部分浏览器或旧版本不识别这个Permissions-Policy字段。

这个警告不会影响视频的正常播放，如果不在意可以直接忽略。如果一定要消除这个警告，可通过配置HTTP头修改Permissions-Policy：

• 如果你使用Create React App，可在package.json中自定义devServer的headers；
• 生产环境则需要在服务器端配置Permissions-Policy头，移除ch-ua-form-factor相关字段。

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