如何在webpack devtool设为eval时显示React跨源错误边界的错误？

我完全懂你的痛点——eval的热更新和重建速度简直是开发效率的利器，换成cheap-module-source-map之后那种等待感真的让人抓狂。下面几个方案可以帮你在保持eval配置的同时，拿到跨源错误的真实详情：

方案1：给Webpack Dev Server添加跨源响应头 #

浏览器之所以隐藏跨源错误信息，核心是同源策略的限制。我们可以在Webpack Dev Server的配置里添加响应头，允许当前环境访问错误详情：

在webpack.config.js的devServer字段中添加：

devServer: {
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
  }
}

同时，确保你的Webpack输出配置里开启跨源加载支持：

output: {
  // 其他配置...
  crossOriginLoading: 'anonymous'
}

这个配置会让浏览器认为你的脚本允许跨源访问错误信息，React就能拿到完整的错误对象了。

方案2：全局监听error事件捕获原始错误 #

React的componentDidCatch在跨源场景下拿不到完整错误，但浏览器的全局error事件不受这个限制。你可以在项目入口文件（比如index.js）里添加全局监听：

window.addEventListener('error', (event) => {
  if (process.env.NODE_ENV === 'development') {
    console.error('全局捕获的原始错误:', event.error);
    // 也可以把错误信息传递给错误边界组件统一处理
  }
});

注意：这个事件会捕获所有未被处理的错误，包括React已经处理的，所以最好加上环境判断，只在开发环境启用。

方案3：使用eval-cheap-module-source-map替代纯eval #

如果上面的方案都不生效，你可以试试eval-cheap-module-source-map这个Devtool选项。它的重建速度几乎和eval一样快，但能生成行级的源映射信息，同时避免跨源错误的限制。修改Webpack配置：

module.exports = {
  // 其他配置...
  devtool: 'eval-cheap-module-source-map'
}

它比cheap-module-source-map快很多，因为只生成行级映射（不包含列信息），但对于开发环境定位错误来说完全足够。

额外提示：排查假阳性跨源问题 #

有时候这个提示可能是假阳性——比如你用了iframe、CDN资源，或者本地开发时端口不一致。先确认所有脚本资源都是同源的，比如本地开发时所有资源都来自localhost:3000（或你指定的端口），没有混合其他域名的资源。

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