React Native 真机断点调试+跨域资源加载出错问题的解决方法
写在前面
闲来无事,折腾了一下React Native,相比之前,开发体验好了不少。但在真机断点调试那里遇到了跨域资源加载出错的问题,一番探索总算解决,目测是RN新版本调试服务的bug。
遇到类似问题的同学应该不少,这里做下记录,有需要的可以参考下。
如何断点调试
首先,在真机上加载运行RN应用(过程略)。
然后,摇动手机,弹出开发菜单,选择“Debug JS Remotely”。
chrome会自动打开调试界面,地址是 http://localhost:8081/debugger-ui/ 。打开控制台,找到想要调试的文件,加断点,搞定。
问题:跨域资源加载出错
理想情况下,上述步骤后,就可以愉快地断点调试了。但实际情况并没有这么顺利,按照 官方指引 修改了host后,问题依然存在。
在控制台看到的错误信息如图所示,跨域资源加载出错。192.168.3.126 是本机内网的ip,而出错资源的域名是 192.168.3.126.xip.io。
在未对RN有深入了解的情况下,想到两种思路,后文会分别讲述细节。
让加载出错的资源,跟调试页面变成同源的
让调试服务支持资源跨域加载
解决方法一:替换主机名
将localhost替换成192.168.3.126.xip.io,也就是说,我们通过http://192.168.3.126.xip.io:8081/debugger-ui/ 来访问调试界面。
调试界面正常访问,资源加载正常,done。
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。
其实很简单,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 返回。
写在后面
前面提到的跨域解决方案,其实都不尽如人意,如有更好的方案,请告诉笔者,谢谢。
参考链接
CORS issue with JS Remote Debugging when using xip.io
Debugging on a device with Chrome Developer Tools
以上这篇React Native 真机断点调试+跨域资源加载出错问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- 怎样裁剪图片的局部
- vb中实现最佳按钮效果
- silverlight:wcf双工通讯学习笔记
- Docker容器学习梳理--web管理工具DockerUI部署记录
- Docker容器学习梳理-容器硬盘热扩容
- 检测到Loaderlock的问题
- 权威报告预测比特币在2018年“王位”不保
- Linux下FTP环境部署梳理(vsftpd和proftpd)
- Silverlight如何与JS相互调用
- Docker容器学习梳理--私有仓库Registry使用
- 从插件重构看如何提升测试质量与效率
- 巧用WinRAR+Javascript解决activeX的自动安装问题
- 在网页中实现QQ的屏幕截图功能
- Activity之间传递参数
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用代码删除SAP CRM的附件(attachment)数据
- node版本管理器:nvm 和 n区别
- Apache - Hive环境部署与快速入门
- 编译和调试openjdk8
- linux编译openjdk8
- Elasticsearch从入门到放弃:瞎说Mapping
- PostgreSQL 为什么接受大量连接到数据库需要连接池
- 一站式的开源持续测试平台---MeterSphere
- 《RabbitMQ》如何保证消息的可靠性
- Ruby 和 Java 的基础语法比较
- 聊聊面试-NoClassDefFoundError 和 ClassNotFoundException 区别
- 聊聊面试-int和Integer的区别
- 记一次Linux修改MySQL配置不生效的问题
- VBA解析复合文档03——解析扇区链表
- C++核心准则E.17:不要试图在所有函数中捕捉所有异常