react-video-js-player加载m3u8源文件报CORS错误如何解决

按以下优先级逐一排查修复：

• 调整crossOrigin属性配置
  当前代码中crossOrigin设置为use-credentials，该配置会强制请求携带凭证，要求服务端返回Access-Control-Allow-Credentials: true响应头，且不允许允许源为通配符，绝大多数公共视频CDN不会开启该配置。优先将属性值改为anonymous重试，修改后参考代码：

<VideoPlayer
  className="videoPlayerRow"
  controls={true}
  src="https://pl.crunchyroll.com/evs3/92407c75eba573edaef323770da9b8cb/assets/1929c2ac66d38ae1c069c1879bda96cf_4033984.mp4/index-v1-a1.m3u8?Expires=1656894361&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9wbC5jcnVuY2h5cm9sbC5jb20vZXZzMy85MjQwN2M3NWViYTU3M2VkYWVmMzIzNzcwZGE5YjhjYi9hc3NldHMvMTkyOWMyYWM2NmQzOGFlMWMwNjljMTg3OWJkYTk2Y2ZfKi5tM3U4PyoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE2NTY4OTQzNjF9fX1dfQ__&Signature=nAGdrOC1FW24K70P75JczK~ZaxietPXEnjd-CsdtN-2qQ3xjIUUjSWL6A0nsT8gnY2BoLBUEbEF7Yc4Jsnb5ai0ueVtuubvBxuBRsYnPugqi23srd3eoJj6lrzjRRwhJHt2eTlx7uh9S0ZOLQkWtndZy5YWek9PxpdhuzkBGKEY7RzG9mriKEIq7wvf2JMasI8Gnjj7dQvWXJNvZmiUMpgLKuYPGzAhY1cM6h4C6ihTPNO861W82jjzkDC12-Hss-NfZWDVZvi2oF0IJlAeybNqjo2ck-HQYs58GhErTh1VnSj-YPHd1pSQKucH~zk6JyCpoSvz33UdoayEDLUGhDA__&Key-Pair-Id=APKAJMWSQ5S7ZB3MF5VA&cdn=akamai-prod"
  height="480"
  crossOrigin="anonymous"
  play
/>

• 本地开发环境配置代理
  如果是在localhost本地调试时出现跨域，可通过构建工具的代理能力转发请求绕过浏览器跨域限制：
  • create-react-app项目：直接在package.json中添加配置"proxy": "https://pl.crunchyroll.com"，随后将src中的域名前缀移除，改为相对路径即可
  • Vite项目：在vite.config.js中配置server.proxy规则，匹配视频路径的请求转发到目标CDN地址
• 服务端中转方案
  如果调整crossOrigin后仍报错，说明目标视频CDN没有配置对应CORS响应头，纯前端配置无法解决该问题。需要自建后端中转服务，前端将请求发送到自有后端，由后端拉取m3u8文件和对应视频分片后返回给前端，服务端请求不受浏览器CORS策略限制。

额外注意：当前使用的m3u8地址携带了过期时间、签名校验参数，本身存在访问时效，参数过期后即使跨域配置正确也会返回403禁止访问，需要重新获取有效播放地址。

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