React Native 真機(jī)斷點(diǎn)調(diào)試+跨域資源加載出錯(cuò)問(wèn)題的解決方法
寫(xiě)在前面
閑來(lái)無(wú)事，折騰了一下React Native，相比之前，開(kāi)發(fā)體驗(yàn)好了不少。但在真機(jī)斷點(diǎn)調(diào)試那里遇到了跨域資源加載出錯(cuò)的問(wèn)題，一番探索總算解決，目測(cè)是RN新版本調(diào)試服務(wù)的bug。
遇到類似問(wèn)題的同學(xué)應(yīng)該不少，這里做下記錄，有需要的可以參考下。
如何斷點(diǎn)調(diào)試
首先，在真機(jī)上加載運(yùn)行RN應(yīng)用（過(guò)程略）。
然后，搖動(dòng)手機(jī)，彈出開(kāi)發(fā)菜單，選擇“Debug JS Remotely”。
chrome會(huì)自動(dòng)打開(kāi)調(diào)試界面，地址是 http://localhost:8081/debugger-ui/ 。打開(kāi)控制臺(tái)，找到想要調(diào)試的文件，加斷點(diǎn)，搞定。
問(wèn)題：跨域資源加載出錯(cuò)
理想情況下，上述步驟后，就可以愉快地?cái)帱c(diǎn)調(diào)試了。但實(shí)際情況并沒(méi)有這么順利，按照 官方指引 修改了host后，問(wèn)題依然存在。
在控制臺(tái)看到的錯(cuò)誤信息如圖所示，跨域資源加載出錯(cuò)。192.168.3.126 是本機(jī)內(nèi)網(wǎng)的ip，而出錯(cuò)資源的域名是 192.168.3.126.xip.io。
在未對(duì)RN有深入了解的情況下，想到兩種思路，后文會(huì)分別講述細(xì)節(jié)。
讓加載出錯(cuò)的資源，跟調(diào)試頁(yè)面變成同源的
讓調(diào)試服務(wù)支持資源跨域加載
解決方法一：替換主機(jī)名
將localhost替換成192.168.3.126.xip.io，也就是說(shuō)，我們通過(guò)http://192.168.3.126.xip.io:8081/debugger-ui/ 來(lái)訪問(wèn)調(diào)試界面。
調(diào)試界面正常訪問(wèn)，資源加載正常，done。
192.168.3.126.xip.io 這個(gè)主機(jī)名看著有點(diǎn)奇怪，后文會(huì)進(jìn)一步介紹背后的原理。
解決方法二：CORS
在github issue《CORS issue with JS Remote Debugging when using xip.io》里，有開(kāi)發(fā)者反饋了同樣的錯(cuò)誤。
他是這樣解決的：
找到node_modules/metro模塊，修改Server/index.js、index.js.flow文件，在_processDeltaRequest方法里加上下面代碼。
mres.setHeader("Access-Control-Allow-Origin", "*");
這個(gè)方法不推薦，不過(guò)如果急著調(diào)試的話也不妨試下。
192.168.3.126.xip.io是什么東東
看到這個(gè)主機(jī)名不少同學(xué)可能一臉懵逼，一個(gè)似乎不存在的主機(jī)名怎么可以訪問(wèn)成功。
在控制臺(tái)下ping了一下返回的是 192.168.3.126 這個(gè)ip。
其實(shí)很簡(jiǎn)單，xip.io是個(gè)特殊的域名，當(dāng)你查詢xxx.xip.io這個(gè)域名對(duì)應(yīng)的ip地址時(shí)，它會(huì)直接返回xxx。
舉例：筆者筆記本的內(nèi)網(wǎng)ip地址是 192.168.3.126，當(dāng)我 訪問(wèn) 192.168.3.126.xip.io，DNS查詢返回的ip地址就是 192.168.3.126。
它的原理也很簡(jiǎn)單，xip.io 的持有者在公網(wǎng)自建了DNS解析服務(wù)，當(dāng)用戶發(fā)起 xxx.xip.io 的DNS查詢時(shí)，它會(huì)直接把 xxx 返回。
寫(xiě)在后面
前面提到的跨域解決方案，其實(shí)都不盡如人意，如有更好的方案，請(qǐng)告訴筆者，謝謝。
參考鏈接
CORS issue with JS Remote Debugging when using xip.io
Debugging on a device with Chrome Developer Tools
以上這篇React Native 真機(jī)斷點(diǎn)調(diào)試+跨域資源加載出錯(cuò)問(wèn)題的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解react的兩種動(dòng)態(tài)改變css樣式的方法
這篇文章主要介紹了詳解react的兩種動(dòng)態(tài)改變css樣式的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
使用React Profiler進(jìn)行性能優(yōu)化方案詳解
在現(xiàn)代前端開(kāi)發(fā)中,性能優(yōu)化是一個(gè)不可忽視的重要環(huán)節(jié),在 React 生態(tài)系統(tǒng)中,React Profiler 是一個(gè)強(qiáng)大的工具,下面我們來(lái)看看如何使用它來(lái)提升我們的 React 應(yīng)用吧2025-03-03
React 項(xiàng)目中動(dòng)態(tài)設(shè)置環(huán)境變量
本文主要介紹了React 項(xiàng)目中動(dòng)態(tài)設(shè)置環(huán)境變量，本文將介紹兩種常用的方法，使用 dotenv 庫(kù)和通過(guò)命令行參數(shù)傳遞環(huán)境變量，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了react使用echart繪制地圖,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
在React中,受控組件指的是表單元素的value值受React組件的state或props控制的組件,而非受控組件則是表單元素的value值由DOM自身負(fù)責(zé)管理的組件,本文將給大家詳細(xì)介紹React受控組件與非受控組件,需要的朋友可以參考下2023-08-08
React實(shí)現(xiàn)文件分片上傳和下載的方法詳解
在當(dāng)今的前端開(kāi)發(fā)中,處理文件流操作已經(jīng)成為一個(gè)常見(jiàn)的需求,無(wú)論是上傳、下載、讀取、展示還是其他的文件處理操作,都需要高效且可靠地處理二進(jìn)制數(shù)據(jù),本文將深入探討如何使用 React 實(shí)現(xiàn)文件分片上傳和下載,并介紹相關(guān)的基本概念和技術(shù),需要的朋友可以參考下2023-08-08
詳解在React-Native中持久化redux數(shù)據(jù)
這篇文章主要介紹了在React-Native中持久化redux數(shù)據(jù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問(wèn)題
這篇文章主要介紹了React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
useReducer 是除useState之外另一個(gè)與狀態(tài)管理相關(guān)的 hook，這篇文章主要為大家介紹了useReducer應(yīng)用的相關(guān)知識(shí)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06
這篇文章主要為大家介紹了前端框架react-spring基礎(chǔ)用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04