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 返回。

写在后面

前面提到的跨域解决方案，其实都不尽如人意，如有更好的方案，请告诉笔者，谢谢。

参考链接

http://xip.io/

CORS issue with JS Remote Debugging when using xip.io

Debugging on a device with Chrome Developer Tools

以上这篇React Native 真机断点调试+跨域资源加载出错问题的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • ReactNative踩坑之配置调试端口的解决方法
赞 (0)

相关推荐

  • ReactNative踩坑之配置调试端口的解决方法

    本文介绍了ReactNative踩坑之配置调试端口的解决方法,分享大家,顺便也给自己留个笔记 问题是这样的,由于公司的机器安装了安全软件,http://localhost:8081被占用了.(windows上配置环境真不易,最后一步还是被公司环境坑了) 所以导致按照教程配置完环境最后到真机上还是刷不出来界面 那么我们就这么放弃了吗?当然不,不然就白忙活了 分析问题:端口被占用,那我们换一个端口不就行啦,于是乎各种查阅资料,发现PackageManager(包管理服务)在启动的时候是可以配置端口的

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

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

    写在前面 闲来无事,折腾了一下React Native,相比之前,开发体验好了不少.但在真机断点调试那里遇到了跨域资源加载出错的问题,一番探索总算解决,目测是RN新版本调试服务的bug. 遇到类似问题的同学应该不少,这里做下记录,有需要的可以参考下. 如何断点调试 首先,在真机上加载运行RN应用(过程略). 然后,摇动手机,弹出开发菜单,选择"Debug JS Remotely". chrome会自动打开调试界面,地址是 http://localhost:8081/debugger-u

  • Vue动态加载图片在跨域时无法显示的问题及解决方法

    写在前面 小记,就简单写了 .问题:VUE开发时因为要访问后端的接口所以要配置请求转发,如果直接转发全部请求,那么VUE动态绑定的src也会转发到后端,因为图片在前端,所以会收到404 NOT FOUND的报错. 常规的请求转发 在vue-cli3内,直接编辑vue.config.js,如下: let proxyObj={}; proxyObj['/']={ ws:false, target:'http://localhost:8023',//后端地址 changeOrigin:true, pa

  • react native基于FlatList下拉刷新上拉加载实现代码示例

    react native基于FlatList下拉刷新上拉加载实现代码示例

    react native 的上拉加载一直困扰着自己,一直用的第三方组件,但是可维护性不高,而且也不太好用,最近工作没那么忙,就研究下了官方的FlatList,做出来的成果,比第三方组件流畅度高好多,而且也很好用 官方介绍:https://reactnative.cn/docs/flatlist/ 下面是效果图: ios效果图 android效果图 总体思路就是:就是计算屏幕高度,然后减去导航的头部,根据列表高度计算出每页的个数,然后向上取整.这样做的目的是:防止不满屏状态下的,onEndReac

  • ajax跨域(基础域名相同)表单提交的方法

    本文实例讲述了ajax跨域(基础域名相同)表单提交的方法.分享给大家供大家参考.具体如下: 1.要在做ajax提交的页面中添加如下js语句: <script type="text/javascript"> document.domain="基础域名"; </script> 2.ajax表单提交表单时可以使用一个jquery的一个表单插件jquery.form.js 使用语法如下: //fromPost为要收集数据的form表单的id $(&q

  • 在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法

    在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法 在ssm框架整合中,使用layui作为前端页面,拖拽图片上传,填写接口后,后台能够成功接收到数据,但由于页面资源和后台访问地址的不一致(即使域名一致但端口不一致)引起跨域问题,导致接收资源后在前端无法接收到后台返回的数据. 前台页面: <html> <head> <meta charset="UTF-8"> <title>校园网络打印</title> <li

  • Apache跨域资源访问报错问题解决方案

    很多时候,大中型网站为了静态资源分布式部署,加快访问速度,减轻主站压力,会把静态资源(例如字体文件.图片等)放在独立服务器或者CDN上,并且使用独立的资源域名(例如res.test.com) 但是在实际部署中,会发现浏览器无法载入这些不同域名的资源,firefox控制台会报错: <span role="presentation" class="objectBox objectBox-errorMessage "><span class="

  • Vue axios 跨域请求无法带上cookie的解决

    在main.js设置 // 携带cookie axios.defaults.withCredentials = true 补充知识:VUE axios请求跨域时没有带上cookie或者每次cookie都改变 这两天用VUE写管理后端时,碰到一个奇葩问题: 我本地使用dev配置开发的时候 请求可以带上cookie信息  打包出来部署在服务器上 请求就没带上cookie信息. 然后自己慢慢排查,联合后端同事,排查这个cookie问题,前端也配置了 axios.defaults.withCredent

  • react脚手架如何配置less和ant按需加载的方法步骤

    前言 create-react-app是由React官方提供并推荐使用构建新的React单页面应用程序的最佳方式,其构建的项目默认是不支持less的,需要我们手动集成 一.react脚手架搭建 1.先全局安装create-react-app(提前需要安装node) npm install -g create-react-app 2.然后通过create-react-app创建项目my-app create-react-app my-app 3.最后通过cd进入项目文件夹并启动 cd my-app

  • React Native基础入门之调试React Native应用的一小步

    React Native(以下简称RN)为传统前端开发者打开了一扇新的大门.其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一. 试想一下,当你在手机屏幕按下一个按钮,处理事件的代码就可以立即在浏览器的调试工具里进行断点调试,而且每当你对代码进行修改,界面便可以完成快速地重载,省去昂长的编译时间,这会是多么提高工作效率. 传统的Web前端开发人员自然很熟悉浏览器的调试工具,但是对于如何将其在RN中使用以便和移动端结合起来,也许会相当陌生.这也成为了一些开发者跨入R

  • Node.js设置CORS跨域请求中多域名白名单的方法

    CORS 说到CORS,相信前端儿都不陌生,这里我就不多说了,具体可以看看这篇文章. CORS,主要就是配置Response响应头中的 Access-Control-Allow-Origin 属性为你允许该接口访问的域名.最常见的设置是: res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Credentials', 'true'); // 允许服务器端发送Cookie数据 然而,这样的

随机推荐