使用 webpack devtool=eval 显示跨域 React 错误边界错误？

Posted 2023-03-04

【中文标题】使用 webpack devtool=eval 显示跨域 React 错误边界错误？

【英文标题】：Display cross-origin React error boundary errors with webpack devtool=eval?

【发布时间】：2018-08-03 20:33:36

【问题描述】：

我刚刚使用 React 16 中的“新”componentDidCatch 功能在我的 React 页面中添加了一个“错误边界”。

但是，当抛出错误时，它会显示：

错误：引发了跨域错误。 React 无法访问开发中的实际错误对象。

React 团队 recommends 我将我的 webpack 开发工具从 eval 更改为 cheap-module-source-map。

这确实有效。

但是，如果您查看performance chart，您会发现cheap-module-source-map 的重建时间明显慢于eval。

我不能让 webpack-dev-server 运行得更慢。对我的一个 JSX 文件进行单个字符更改后，重建已经需要大约 10 秒。这也不是在慢速笔记本电脑上。

在不更改我的 webpack devtool 的情况下是否可以显示错误？

【参考方案1】：

facebook/react issue #10441有一些讨论。

问题似乎是在一些非常具体的条件下出现的。自从在我的开发机器上安装负载平衡器和反向代理后，我也遇到了这个错误，如果不启用 CORS，我无法完全满意地解决这个问题。您可以尝试以下方法：

尝试不同的 Webpack 开发工具（来自您链接的表）。例如，对于我的设置，cheap-eval-source-map 可以正常工作，但cheap-module-eval-source-map 不行。 在 Webpack 开发配置中设置 output.crossOriginLoading = 'anonymous' 以启用块的跨域加载

作为最后的手段，您可以尝试在开发模式下全局或针对特定路由启用CORS 服务器端。假设启用 CORS，您可以使用任何开发工具，从而缓解性能问题，但是...

警告：启用 CORS 这是一个安全漏洞，可能非常危险，具体取决于您的安全要求（请参阅下面的链接）。

在所有路由上启用 CORS 的简单 Express 中间件示例：

// Enable CORS in development
if(config.IS_DEVELOPMENT) 
  app.use((req, res, next) => 
    res.header('Access-Control-Allow-Origin', '*')
    res.header('Access-Control-Allow-Headers',
      'Origin, X-Requested-With, Content-Type, Accept')
    next()
  )

您可以使其更智能，并且仅在捆绑重新加载路由上选择性地启用 CORS。你可以试试expressjs/cors 包，它提供了更多的灵活性。

同样，您可以将 CORS 标头添加到 webpack-dev-server devServer.headers

另见：

What are the security risks of setting Access-Control-Allow-Origin? When is it safe to enable CORS?