寫在前面

閑來無事，折騰了一下React Native，相比之前，開發(fā)體驗(yàn)好了不少。但在真機(jī)斷點(diǎn)調(diào)試那里遇到了跨域資源加載出錯的問題，一番探索總算解決，目測是RN新版本調(diào)試服務(wù)的bug。

遇到類似問題的同學(xué)應(yīng)該不少，這里做下記錄，有需要的可以參考下。

如何斷點(diǎn)調(diào)試

首先，在真機(jī)上加載運(yùn)行RN應(yīng)用（過程略）。

然后，搖動手機(jī)，彈出開發(fā)菜單，選擇“Debug JS Remotely”。

chrome會自動打開調(diào)試界面，地址是 http://localhost:8081/debugger-ui/ 。打開控制臺，找到想要調(diào)試的文件，加斷點(diǎn)，搞定。

問題：跨域資源加載出錯

理想情況下，上述步驟后，就可以愉快地?cái)帱c(diǎn)調(diào)試了。但實(shí)際情況并沒有這么順利，按照 官方指引 修改了host后，問題依然存在。

在控制臺看到的錯誤信息如圖所示，跨域資源加載出錯。192.168.3.126 是本機(jī)內(nèi)網(wǎng)的ip，而出錯資源的域名是 192.168.3.126.xip.io。

在未對RN有深入了解的情況下，想到兩種思路，后文會分別講述細(xì)節(jié)。

讓加載出錯的資源，跟調(diào)試頁面變成同源的

讓調(diào)試服務(wù)支持資源跨域加載

解決方法一：替換主機(jī)名

將localhost替換成192.168.3.126.xip.io，也就是說，我們通過http://192.168.3.126.xip.io:8081/debugger-ui/ 來訪問調(diào)試界面。

調(diào)試界面正常訪問，資源加載正常，done。

192.168.3.126.xip.io 這個(gè)主機(jī)名看著有點(diǎn)奇怪，后文會進(jìn)一步介紹背后的原理。

解決方法二：CORS

在github issue《CORS issue with JS Remote Debugging when using xip.io》里，有開發(fā)者反饋了同樣的錯誤。

他是這樣解決的：

找到node_modules/metro模塊，修改Server/index.js、index.js.flow文件，在_processDeltaRequest方法里加上下面代碼。

mres.setHeader("Access-Control-Allow-Origin", "*");

這個(gè)方法不推薦，不過如果急著調(diào)試的話也不妨試下。

192.168.3.126.xip.io是什么東東

看到這個(gè)主機(jī)名不少同學(xué)可能一臉懵逼，一個(gè)似乎不存在的主機(jī)名怎么可以訪問成功。

在控制臺下ping了一下返回的是 192.168.3.126 這個(gè)ip。

其實(shí)很簡單，xip.io是個(gè)特殊的域名，當(dāng)你查詢xxx.xip.io這個(gè)域名對應(yīng)的ip地址時(shí)，它會直接返回xxx。

舉例：筆者筆記本的內(nèi)網(wǎng)ip地址是 192.168.3.126，當(dāng)我 訪問 192.168.3.126.xip.io，DNS查詢返回的ip地址就是 192.168.3.126。

它的原理也很簡單，xip.io 的持有者在公網(wǎng)自建了DNS解析服務(wù)，當(dāng)用戶發(fā)起 xxx.xip.io 的DNS查詢時(shí)，它會直接把 xxx 返回。

寫在后面

前面提到的跨域解決方案，其實(shí)都不盡如人意，如有更好的方案，請告訴筆者，謝謝。

參考鏈接

http://xip.io/

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)試+跨域資源加載出錯問題的解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。