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 相关文章推荐
JS Timing
Apr 21 Javascript
js opener的使用详解
Jan 11 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
详解JavaScript中的链式调用
Nov 27 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 Javascript
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写UltraEdit插件脚本实现方法
2011/12/26 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
python判断字符串是否纯数字的方法
2014/11/19 Python
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
Php多进程实现代码
2018/05/07 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
如何卸载python插件
2020/07/08 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
Python通过字典映射函数实现switch
2020/11/06 Python
浅析python连接数据库的重要事项
2021/02/22 Python
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
计算机专业毕业生自我鉴定
2014/01/16 职场文书
户籍证明书标准模板
2014/09/10 职场文书
教师节随笔
2015/08/15 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL