下面，边肖给大家分享一个React原生真机断点调试跨域资源加载错误的解决方案。有很好的参考价值，希望对你有帮助。来和边肖一起看看吧。

写在前面

由于无事可做，我只能在原地打转。相比之前，开发体验好了很多。但是在真机断点调试中遇到了跨域资源加载错误的问题。经过一番摸索，终于解决了。目测是RN新版本调试服务的bug。

应该有很多同学遇到过类似的问题。这里有一张唱片。如果有需要，可以参考一下。

如何断点调试

首先，在真实的机器上加载并运行RN应用程序(过程省略)。

然后，晃动手机，弹出开发菜单，选择“远程调试JS”。

Chrome会在http://localhost:8081/debugger-ui/自动打开调试界面。打开控制台，找到要调试的文件，添加一个断点，然后完成。

问题：跨域资源加载出错

理想情况下，完成上述步骤后，您就可以愉快地进行断点调试了。然而，实际情况并非如此顺利。按照官方指引修改主机后，问题依然存在。

你在控制台看到的错误信息如图，加载跨域资源出错。192.168.3.126是本地内网的ip，而错误资源的域名是192.168.3.126.xip.io

在对RN没有深入了解的情况下，我想到两个思路，后面会详细介绍。

让加载错误的资源变得和调试页面一样。

让调试服务支持资源跨域加载。

解决方法一：替换主机名

用192.168.3.126.xip.io替换localhost，也就是我们通过http://192.168.3.126.xip.io:8081/debugger-ui/.访问调试界面

调试界面正常访问，资源正常加载，完成。

主机名192.168.3.126.xip.io看起来有点奇怪，后面会进一步介绍背后的原理。

解决方法二：CORS

在github问题《CORS issue with JS Remote Debugging when using xip.io》中，一些开发人员报告了同样的错误。

他是这样解决的：

找到node_modules/metro模块，修改Server/index.js、index.js.flow文件，将以下代码添加到_processDeltaRequest方法中。

mres . set header(' Access-Control-Allow-Origin '，' * ')；

不推荐这种方法，但如果你急着调试，不妨试试。

192.168.3.126.xip.io是什么东东

看到这个主机名，很多同学可能会一脸不解。看似不存在的主机名如何访问成功？

在控制台下Ping它，它返回的ip是192.168.3.126。

其实很简单。xip.io是一个特殊的域名。当你查询域名xxx.xip.io对应的ip地址时，会直接返回xxx。

比如作者笔记本的内网ip地址是192.168.3.126。当我访问192.168.3.126.xip.io时，DNS查询返回的ip地址是192.168.3.126。

它的原理也很简单。xip.io的持有者在公网上建立了自己的DNS解析服务。当用户发起xxx.xip.io的DNS查询时，会直接返回xxx。

写在后面

事实上，上面提到的跨域解决方案都不尽如人意。如果有更好的解决方法，请告诉作者。谢谢你。

参考链接

http://xip.io/

使用xip.io时JS远程调试的CORS问题

使用Chrome开发工具在设备上调试

以上React原生真机断点调试跨域资源加载错误问题的解决方法，就是边肖分享的全部内容。希望给大家一个参考，多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。