DDR爱好者之家

React Native 真机断点调试+跨域资源加载出错问题的解决方法
站长资源 2025/1/12 佚名
52 1538
DDR爱好者之家 Design By 杰米

写在前面

闲来无事，折腾了一下React Native，相比之前，开发体验好了不少。但在真机断点调试那里遇到了跨域资源加载出错的问题，一番探索总算解决，目测是RN新版本调试服务的bug。

遇到类似问题的同学应该不少，这里做下记录，有需要的可以参考下。

如何断点调试

首先，在真机上加载运行RN应用（过程略）。

然后，摇动手机，弹出开发菜单，选择“Debug JS Remotely”。

React Native 真机断点调试+跨域资源加载出错问题的解决方法

chrome会自动打开调试界面，地址是 http://localhost:8081/debugger-ui/ 。打开控制台，找到想要调试的文件，加断点，搞定。

React Native 真机断点调试+跨域资源加载出错问题的解决方法

问题：跨域资源加载出错

理想情况下，上述步骤后，就可以愉快地断点调试了。但实际情况并没有这么顺利，按照 官方指引 修改了host后，问题依然存在。

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

React Native 真机断点调试+跨域资源加载出错问题的解决方法

在未对RN有深入了解的情况下，想到两种思路，后文会分别讲述细节。

让加载出错的资源，跟调试页面变成同源的

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

解决方法一：替换主机名

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

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

React Native 真机断点调试+跨域资源加载出错问题的解决方法

192.168.3.126.xip.io 这个主机名看着有点奇怪，后文会进一步介绍背后的原理。

解决方法二：CORS

在github issue《CORS issue with JS Remote Debugging when using xip.io》里，有开发者反馈了同样的错误。

他是这样解决的：

找到node_modules/metro模块，修改Server/index.js、index.js.flow文件，在_processDeltaRequest方法里加上下面代码。

mres.setHeader("Access-Control-Allow-Origin", "*");

这个方法不推荐，不过如果急着调试的话也不妨试下。

192.168.3.126.xip.io是什么东东

看到这个主机名不少同学可能一脸懵逼，一个似乎不存在的主机名怎么可以访问成功。

在控制台下ping了一下返回的是 192.168.3.126 这个ip。

React Native 真机断点调试+跨域资源加载出错问题的解决方法

其实很简单，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/

CORS issue with JS Remote Debugging when using xip.io

Debugging on a device with Chrome Developer Tools

以上这篇React Native 真机断点调试+跨域资源加载出错问题的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米