在ReactPlayer中播放Wistia视频报错：XMLHttpRequest构造函数已被篡改

嘿，我之前也碰到过类似的棘手问题，这个报错的核心原因是页面里的某个脚本（或者浏览器扩展）修改了原生的XMLHttpRequest构造函数，导致Wistia加载视频时的CORS和Range请求无法正常执行。下面是几个我亲测有效的解决思路：

• 先排除浏览器扩展干扰：很多广告拦截、隐私保护类的扩展会篡改XHR来拦截请求，建议先把所有浏览器扩展临时禁用，刷新页面看看播放器能不能正常工作。如果恢复正常了，就逐个开启扩展找到那个“搞破坏”的家伙，要么直接禁用它，要么给当前站点加个白名单。

• 检查页面内的第三方脚本：如果禁用扩展没用，就排查下你页面里引入的第三方脚本——比如广告SDK、统计工具、其他嵌入插件，有没有哪个会篡改XHR构造函数。你可以在浏览器控制台输入XMLHttpRequest.toString()来验证，如果输出不是原生的构造函数代码（比如显示自定义函数），那它就是问题根源。找到后要么替换成不篡改XHR的版本，要么调整加载顺序（比如把Wistia相关的加载逻辑放在这个脚本之前）。

• 改用Wistia官方嵌入方式替代ReactPlayer：有时候ReactPlayer对Wistia的适配不如官方方案直接。你可以试试用Wistia提供的iframe嵌入代码，示例如下：

  <iframe 
    src="https://getleda.wistia.com/medias/bjz07hdxqx?embedType=async&videoFoam=true" 
    className="storyPlayer__reactPlayer" 
    width="100%" 
    height="100%" 
    frameBorder="0" 
    allowFullScreen
    onLoad={() => this.setState({ ready: true })}
  />
  

  或者使用Wistia的JavaScript SDK来初始化播放器，这样能更好地兼容他们的请求机制。

• 修复XHR被篡改的问题：如果是你自己的代码或者依赖包修改了XHR（比如老旧的polyfill或自定义请求封装），要避免直接替换XMLHttpRequest构造函数。比如把替换构造函数的写法改成扩展原型的方式：

  // 不推荐的写法：直接替换构造函数
  // XMLHttpRequest = function() { ... }
  
  // 推荐的写法：扩展原型，保留原生功能
  const originalXHR = XMLHttpRequest;
  XMLHttpRequest.prototype.open = function(method, url) {
    // 这里可以加自定义逻辑
    return originalXHR.prototype.open.apply(this, arguments);
  };
  

如果以上方法都试过还是不行，你可以在控制台打印window.XMLHttpRequest，查看它的原型链和属性，精准定位到底是谁篡改了它，这样就能针对性解决问题了。

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