React项目componentDidCatch捕获错误时报跨域错误的原因是什么？

问题原因 #

这个报错是React开发模式的特有限制，和你抛出错误的格式没有关系，核心触发原因如下：

• 当前你部署在远程服务器的是React开发环境构建版本，React在开发模式下出于安全考虑，跨源访问场景中不会暴露完整的错误对象，防止敏感信息泄露，你从本地设备访问远程服务器的服务，二者不属于同源，所以触发了该限制。
• 远程的React开发服务没有配置正确的CORS响应头，浏览器的同源策略拦截了React对错误堆栈、完整错误信息的读取权限，因此React无法拿到你抛出的真实错误内容，只会返回跨源错误的提示。

解决方案 #

• 如需在线上部署验证ErrorBoundary功能，直接打包生产环境版本部署即可，生产模式下React没有该跨源错误限制，可以正常拿到你抛出的错误对象。
• 如果你需要保留开发模式进行远程调试，可以给你使用的构建工具配置跨源响应头，比如使用webpack-dev-server的话，在devServer配置中添加：

headers: {
  "Access-Control-Allow-Origin": "*"
}

其他构建工具同理，给静态资源、开发服务接口添加允许你本地访问源的CORS头即可。

• 临时验证功能的话，也可以直接在本地启动开发服务，通过localhost同源访问开发版本，不会触发该跨源限制。

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