web-dev-qa-db-ja.com

CORSに関するReact-native JSデバッガーの問題— iOS

IOSの反応ネイティブJSデバッガーに問題があります。 JSデバッガーツールを使用してアプリをデバッグしようとすると、エラーが発生します。ウェブ上でさまざまなソリューションを試しましたが、成功しませんでした。誰かがこのエラーに遭遇し、それを修正することができましたか？

複製：

1） http://172.16.23.27.xip.io:8081/index.delta?platform=ios&dev=true&minify=false からJSバンドルをロードする実際のiOSデバイスで開発アプリを実行します

2）JSリモートデバッグツールを有効にします。これにより、Chromeで http：// localhost：8081/debugger-ui / が開きます。

3）バンドルがリロードされ、Chrome DevToolsコンソールに次のエラーが表示されます。

ロードに失敗しました http://172.16.23.27.xip.io:8081/index.delta?platform=ios&dev=true&minify=false ：No 'Access-Control -Allow-Origin 'ヘッダーが要求されたリソースに存在します。したがって、Origin ' http：// localhost：8081 'はアクセスを許可されません。不透明な応答がニーズを満たしている場合は、要求のモードを「no-cors」に設定して、CORSを無効にしてリソースをフェッチします。 （インデックス）：188 Uncaught（in promise）TypeError：Failed to fetch

"react": "16.2.0",
"react-native": "0.52.1"
react-nativelocalhostremote-debugging
11
Diego Oriani

インストール Allow-Control-Allow-Origin：* chrome拡張機能。応答ヘッダーにCROSを追加します。

8
Pir Shukarullah Shah

http://172.16.23.27.xip.io:8081/debugger-ui/をデバッグに使用してみてください。

または

  1. /node_modules/metro/src/Server\index.jsを開きます

  2. _processDeltaRequestを見つける

      mres.setHeader(FILES_CHANGED_COUNT_HEADER, String(output.numModifiedFiles));
  mres.setHeader('Content-Type', 'application/javascript');
  mres.setHeader('Content-Length', String(Buffer.byteLength(output.bundle)));
+ mres.setHeader('Access-Control-Allow-Origin', '*');
  mres.end(output.bundle);
13
justjavac

これに追加するだけで、誰かがiOSで開発している場合は、Android（またはその逆）..

このメッセージが表示され、以前は機能していた場合。たとえば、iOSプロジェクトで作業していた後、Metro Bundlerを閉じ、cmdを開いてAndroid用にビルドしました。私のデバッガーは以前、Androidプロジェクトで動作していましたが、このプロセスの後、CORSの問題を受け取りました。

Chromeのデバッガータブを閉じて、React-Native Devメニューで再度開きます。プロジェクトを再構築して、ちょっとお試しください！あなたのためのアプローチもあります。

8
JRK