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 相关文章推荐
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
jQuery 对象中的类数组操作
2009/04/27 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
详解python中的数据类型和控制流
2019/08/08 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
Django实现celery定时任务过程解析
2020/04/21 Python
Python3实现飞机大战游戏
2020/04/24 Python
Python转换字典成为对象,可以用"."方式访问对象属性实例
2020/05/11 Python
详解python程序中的多任务
2020/09/16 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
几道PHP面试题
2013/04/14 面试题
竞聘上岗演讲稿范文
2014/01/10 职场文书
期末自我鉴定
2014/01/23 职场文书
消防安全员岗位职责
2014/03/10 职场文书
美术教师岗位职责
2014/03/18 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
新郎结婚感言
2015/07/31 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis