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


Posted in Javascript onJanuary 18, 2018

写在前面

闲来无事,折腾了一下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 真机断点调试+跨域资源加载出错问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
JavaScript严格模式详解
Nov 18 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
微信小程序实现底部弹出模态框
Nov 18 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
ajax请求data遇到的问题分析
Jan 18 #Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 #Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 #Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 #Javascript
详解微信小程序审核不通过的解决方法
Jan 17 #Javascript
swiper动态改变滑动内容的实现方法
Jan 17 #Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 #Javascript
You might like
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
浅析php header 跳转
2013/06/17 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
Python常用随机数与随机字符串方法实例
2015/04/09 Python
Python使用OpenCV进行标定
2018/05/08 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
django自带调试服务器的使用详解
2019/08/29 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
Python遍历字典方式就实例详解
2019/12/28 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
超市业务员岗位职责
2013/12/05 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
会计试用期工作总结2015
2015/05/28 职场文书