React Native 関連のクロスドメイン リソース エラーの問題

ここで、React Native の実機ブレークポイントのデバッグ + クロスドメイン リソース読み込みエラーの問題の解決策を共有します。これは良い参考値であり、

前に書きました。

何もすることがないので、React Native をしばらくいじってみましたが、以前に比べて開発エクスペリエンスがはるかに向上しました。しかし、実際のマシンのブレークポイントのデバッグ中にクロスドメイン リソースの読み込みエラーの問題が発生しました。いくつか調査した結果、この問題は新しいバージョンの RN のデバッグ サービスのバグであることが判明しました。

同様の問題に遭遇した学生はたくさんいるはずです。ここに記録し、必要に応じて参照します。

ブレークポイントを使用したデバッグ方法

まず、RNアプリケーションを実機にロードして実行します（プロセスは省略します）。

次に、携帯電話を振ると開発メニューがポップアップ表示され、「JS をリモートでデバッグ」を選択します。

Chrome は自動的にデバッグ インターフェイスを開きます。アドレスは http://localhost:8081/debugger-ui/ です。コンソールを開き、デバッグするファイルを見つけ、ブレークポイントを追加して完了です。

問題: クロスドメインリソース読み込みエラー

理想的には、上記の手順の後、ブレークポイントを使用して問題なくデバッグできるようになります。しかし、実際の状況はそれほどスムーズではありませんでした。公式のガイドラインに従ってホストを修正した後も、問題は依然として存在しました。

コンソールに表示されるエラーメッセージは図のとおりで、クロスドメインリソースのロード中にエラーが発生しました。 192.168.3.126 はローカル イントラネットの IP で、エラー リソースのドメイン名は 192.168.3.126.xip.io です。

RN についての深い理解がないまま、私は 2 つのアイデアを思いつきました。詳細は以下で説明します。

読み込みエラーのあるリソースをデバッグ ページと同じソースにします

デバッグ サービスがリソースのクロスドメイン読み込みをサポートできるようにします

解決策 1: ホスト名を置き換えます

localhost を 192.168.3.126 に置き換えます.xip .io、つまり、http://192.168.3.126.xip.io:8081/debugger-ui/ を通じてデバッグ インターフェイスにアクセスします。

デバッグインターフェースが正常にアクセスされ、リソースが正常にロードされ、完了しました。

192.168.3.126.xip.io このホスト名は少し奇妙に見えますが、その背後にある原理については後で詳しく説明します。

解決策 2: CORS

github の問題「xip.io 使用時の JS リモート デバッグに関する CORS の問題」で、開発者が同じエラーを報告しました。

彼は次のように解決しました:

node_modules/metro モジュールを見つけて、Server/index.js ファイルとindex.js.flow ファイルを変更し、次のコードを _processDeltaRequest メソッドに追加します。

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

この方法はお勧めできませんが、急いでデバッグしたい場合は、試してみるとよいでしょう。

192.168.3.126.xip.ioとは

多くの学生は、このホスト名を見て、存在しないように見えるホスト名にどうやってアクセスできるのか混乱するかもしれません。

コンソールで ping を実行すると、返される IP は 192.168.3.126 です。

実際は非常に単純で、xip.io は、ドメイン名 xxx.xip.io に対応する IP アドレスをクエリすると、直接 xxx を返します。

例: 私のラップトップのイントラネット IP アドレスは 192.168.3.126.xip.io にアクセスすると、DNS クエリによって返される IP アドレスは 192.168.3.126 です。

その原理も非常に単純で、xip.io の所有者はパブリック ネットワーク上に独自の DNS 解決サービスを構築しており、ユーザーが xxx.xip.io に対して DNS クエリを開始すると、xxx が直接返されます。

後ろに書いてあります

上記のクロスドメインソリューションは実際には満足のいくものではありません、より良い解決策がある場合は、作者にお知らせください。

参考リンク

http://xip.io/

xip.io使用時のJSリモートデバッグに関するCORSの問題

Chrome開発者ツールを使用したデバイスでのデバッグ

上記は私がコンパイルしたものです皆さん、今後も皆さんのお役に立てれば幸いです。

関連記事:

ES6 イテレータと for.of ループ (詳細なチュートリアル)

vue でのより優れたスクロール プラグインの使用

VUE + で単一画像のクロスドメイン アップロード機能を実装する方法UEditor

vue では、Watch がオブジェクトのプロパティの変更を検出しないという問題があります

veloticy-ui はテキストアニメーション効果を実装します

js で定義された変数 let と var の違いは何ですか?

VUE 個人的な概要 (遭遇した問題)

Nuxt.js Vue のサーバーサイドレンダリングの探索

以上がReact Native 関連のクロスドメイン リソース エラーの問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。