调用YouTube IFrame Player API触发postMessage错误 跨域导致自动播放失败

这个报错属于iframe父子窗口通信的同源策略校验失败，和你服务端配置的CORS响应头无关，CORS规则仅适用于AJAX/fetch类请求，无法覆盖postMessage通信的校验逻辑。可按照以下步骤修复：

• 修正origin参数的配置位置：origin不属于playerVars的配置项，需要和height、width同级写在YT.Player的顶层配置中，且参数名必须为全小写的origin，不能使用大写的Origin，同时删除playerVars中错误配置的Origin参数
• 确保origin的取值和浏览器地址栏中的站点源完全一致：如果你当前用http://localhost:8000访问本地服务，就填写origin: 'http://localhost:8000'，如果切换为HTTPS访问则改为对应的HTTPS地址，端口、协议、域名三者必须完全匹配
• 删除多余的host配置：YT.Player默认会使用正确的YouTube服务地址，额外指定host反而可能触发校验异常
• 自动播放适配：当前主流浏览器均禁止非静音视频自动播放，如需实现自动播放效果需要在playerVars中添加'mute': 1配置

修正后的代码示例：

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    origin: 'http://localhost:8000', // 写在顶层配置，全小写，和地址栏源一致
    playerVars: { 
      'autoplay': 1, 
      'controls': 0,
      'mute': 1 // 如需自动播放必须加静音配置
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange,
      'onError': onPlayerError
    }
  });
}

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