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 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
原生js实现轮播图特效
May 04 Javascript
OpenLayer学习之自定义测量控件
Sep 28 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图片验证码制作实现分享(全)
2012/05/10 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
python list使用示例 list中找连续的数字
2014/01/27 Python
python类参数self使用示例
2014/02/17 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
使用Python写一个小游戏
2018/04/02 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
python矩阵的转置和逆转实例
2018/12/12 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
房屋买卖协议书
2014/04/10 职场文书
优秀教师个人材料
2014/12/15 职场文书
长城的导游词
2015/01/30 职场文书
搞笑结婚保证书
2015/05/08 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
Python first-order-model实现让照片动起来
2022/06/25 Python