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有深入了解的情况下,想到两种思路,后文会分别讲述细节。

  1. 让加载出错的资源,跟调试页面变成同源的
  2. 让调试服务支持资源跨域加载

解决方法一:替换主机名

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

写在后面

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

如果还没解决,试试下面的绝招:

原文地址:https://www.cnblogs.com/lguow/p/9193244.html

时间: 2024-07-30 11:18:18

React Native 断点调试 跨域资源加载出错问题的原因分析的相关文章

qt资源加载出错

-1: error: No rule to make target '../InteractivePlayer/style.qss', needed by 'debug/qrc_res.cpp'.  Stop. 问题出现: 我把添加qss资源文件  重新删除 移动位置. 再次添加新的资源文件,编译的时候出错. 解决: 1. .pro目录下 RESOURCES += \ res.qrc是表示资源文件, 其会被生成一个qrc_res.cpp 文件. 2.清除编译目录(debug/release)下的

Android 4.X 系统加载 so 失败的原因分析

1 so 加载过程 so 加载的过程可以参考小米的系统工程师的文章loadLibrary动态库加载过程分析 2 问题分析 2.1 问题 年前项目里新加了一个 so库,但发现native 方法的找不到的 crash 好多,好些都是报了java.lang.unsatisfiedlinkerror native method not found,而且基本上是出现在4.x的系统里,特别是 4.4,4.2的系统.在网络上搜索相关的可能导致到这个问题的原因: so 文件没有在对应架构的目录里找到: 方法名有

常用跨域资源请求分析

WEB开发过程中最常使用 Ajax技术来完成客户端与服务器的通信.而实现Ajax通信的XmlHttpRequest对象会带来跨域安全策略问题.简单来说,默认情况下,XHR对象只能访问与包含它的页面位于同一个域下的资源. 那么问题来了,何为跨域呢?通常,Ajax指向的地址中,二级域名/端口号/协议/必须与包含它的页面相同.举个栗子: www.tangide.com 访问 www.i5r.com是跨域. a.tangide.com 访问 b.tangide.com是跨域. www.tangide.c

JAVA跨域资源访问CORSFilter

当一个资源从与该资源本身所在的服务器不同的域或端口不同的域或不同的端口请求一个资源时,资源会发起一个跨域 HTTP 请求. 出于安全考虑,浏览器会限制从脚本内发起的跨域HTTP请求.跨域资源共享机制允许 Web 应用服务器进行跨域访问控制,从而使跨域数据传输得以安全进行.浏览器支持在 API 容器中使用 CORS,以降低跨域 HTTP 请求所带来的风险. 针对于JAVA开发而言,为了更好的做业务分层,经常会将前后端代码分离开来,发布在不同的服务器上,此时,便会遇到跨域的问题. 跨域有很多种解决方

跨域资源请求 JSONP CORS

1.什么是跨域资源请求? https://blog.csdn.net/u014607184/article/details/52027879 1.1 同源策略 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制. XMLHttpRequest 受同源策略限制 2.如何解决 跨域资源请求 限制 JSONP   https://blog.csdn.net/DFF1993/article/details/79925874 CORS http://www.ruanyifeng.com/bl

flask后端+ajax前端,解决跨域资源引起CORB问题

在 Javascript 中跨域访问是比较常见的事情,这次记录使用flask写后端API,前端ajax调用时产生的跨域问题. 问题描述:跨域资源引起CORB. 解决方案: jsonp解决跨域问题 前端代码: // 回掉函数,默认callback=jQuery30004159376653216822_1550582355513 function showData(data) { console.info("Get Into showData"); // json对象转成字符串 var r

网页的资源加载优化

移动开发中很重要的一块是资源的加载优化.移动开发由于网速低带宽,高延迟,移动设备小内存,低处理器性能的原因,因此很多时候不得不通过优化前端页面的性能来满足用户对网页加载的预期. 前段时间做了相关方面的优化,发现网上的中文教程比较少,都是照着chrome开发者网站上一步一步看下来,找问题来解决,因此将部分有用的网页整理翻译了一下. 一.查看网页加载速度 网页加载时长受到网速影响,一般采用浏览器模拟一个特定网速进行测试,这样优化前与优化后的结果会有一个较准确的对比. 方法:打开调试面板-选择网速,一

各浏览器对页面外部资源加载的策略

这个总结来源于一次优化的请求,最初某个页面的加载十分缓慢,load事件迟迟无法触发,因此希望可以通过对静态文件分域名等方式对页面的外部资源进行优化,拿得load事件尽可能早地触发. 于是我查看了页面的源码,并对外部资源进行了整理,基于下面2个理念画出了一个推测的瀑布图: 1.浏览器对同一个域只能并发2个HTTP请求 – 网上盛传已久.2.javascript文件的加载会阻塞浏览器其他资源的加载 – 同样网上盛传已久. 然而,当我看到各浏览器中实际的瀑布图时,我知道自己又犯了一个简单的错误:太过相

Cocos2d-x 3.0多线程异步资源加载

Cocos2d-x从2.x版本到上周刚刚才发布的Cocos2d-x 3.0 Final版,其引擎驱动核心依旧是一个单线程的"死循环",一旦某一帧遇到了"大活儿",比如Size很大的纹理资源加载或网络IO或大量计算,画面将 不可避免出现卡顿以及响应迟缓的现象.从古老的Win32 GUI编程那时起,Guru们就告诉我们:别阻塞主线程(UI线程),让Worker线程去做那些"大活儿"吧. 手机游戏,即便是休闲类的小游戏,往往也涉及大量纹理资源.音视频资