React电影应用播放YouTube预告片时出现CORS错误，如何解决？

错误含义 #

这个报错是浏览器CORS（跨域资源共享）安全策略拦截请求导致的：
当你嵌入的YouTube视频加载时，视频内部的广告请求从https://www.youtube.com重定向到https://googleads.g.doubleclick.net，但目标服务器没有返回Access-Control-Allow-Origin响应头，浏览器出于同源安全限制，直接阻止了这个跨域请求。本质上这是YouTube广告系统的跨域配置问题，并非你代码的直接错误，但会在控制台抛出报错，部分场景下可能影响视频加载。

修复方案 #

1. 给嵌入链接添加origin参数（最简单有效） #

在Video组件的iframe链接中添加当前页面的origin参数，明确告知YouTube允许当前域名的跨域请求，能有效缓解广告相关的CORS报错：
修改Video.jsx的代码：

export default function Video(props) {
  const currentOrigin = window.location.origin;
  
  return (
    <div className='videos'>
        <iframe 
          src={`https://www.youtube.com/embed/${props.videoKey}?origin=${currentOrigin}`} 
          frameBorder={0} 
          title={props.videoKey} 
          width={500} 
          height={295} 
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
        />
    </div>
  )
}

2. 使用YouTube IFrame Player API（更规范的方案） #

如果上述方法无效，推荐使用官方的YouTube IFrame Player API加载视频，它的跨域处理更严谨，能避免大部分第三方资源的CORS问题：

// Video.jsx
import { useEffect, useRef } from 'react';

export default function Video(props) {
  const playerContainerRef = useRef(null);

  useEffect(() => {
    // 动态加载YouTube Player API脚本
    if (!window.YT) {
      const script = document.createElement('script');
      script.src = "https://www.youtube.com/iframe_api";
      document.body.appendChild(script);
      script.onload = initPlayer;
    } else {
      initPlayer();
    }

    // 初始化播放器
    function initPlayer() {
      new window.YT.Player(playerContainerRef.current, {
        videoId: props.videoKey,
        width: 500,
        height: 295,
        playerVars: {
          origin: window.location.origin
        }
      });
    }

    // 组件卸载时销毁播放器
    return () => {
      if (window.YT && playerContainerRef.current) {
        playerContainerRef.current.destroy();
      }
    };
  }, [props.videoKey]);

  return <div ref={playerContainerRef} className='videos'></div>;
}

3. 临时忽略报错（不推荐） #

如果控制台报错但视频能正常播放，这个错误可以暂时忽略——因为它源于YouTube广告系统的第三方请求，你无法完全控制第三方服务器的CORS配置。

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