web-dev-qa-db-ja.com

Reactネイティブ：フェッチ要求がエラーで失敗しました-TypeError：ネットワーク要求が失敗しました（…）

React Nativeを使用してシンプルなアプリを開発しています。Androidデバイスでテストしています。リクエストをリッスンするNode.jsサーバーを作成しました。 http：// localhost：3333 / で実行されています次に、index.Android.jsからフェッチリクエストを作成しています。以下にコードを示します。

fetch('http://localhost:3333/', 
        {
            'method': 'GET',
            'headers': {
                'Accept': 'text/plain',                                     
            }
        }       
    ) 
.then((response) => response.text()) 
.then((responseText) => {
    console.log(responseText);  
}) 
.catch((error) => {
    console.warn(error);
});

ノードサーバーのリクエストハンドラのコードは以下です

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
}); 
app.use(express.static('public'));
app.get('/', function(req, res){ 
    console.log('Request received for /');
    res.send("this is the response from the server");
    res.end();
});

しかし、フェッチ要求は機能していません。 Chromeコンソールで発生するエラーはTypeError：Network request failed（…）です。

これを機能させるには？

androidnode.jsexpressreactjsreact-native
16
C.P.

Androidデバイスには独自のIPがあるため、localhostだけでなく、fetch('http://192.168.0.2:3333/')などのように、URLをコンピュータのIPアドレスにポイントする必要があります。

28
oblador

Android Debug Bridgeツール（adb）のreverseコマンドを使用します。

adb reverse <remote> <local> - reverse socket connections.
                               reverse specs are one of:
                                 tcp:<port>
                                 localabstract:<unix domain socket name>
                                 localreserved:<unix domain socket name>
                                 localfilesystem:<unix domain socket name>

例えば：

adb reverse tcp:3333 tcp:3333

これはlocalhost:3333デバイスからアクセスできます。別のポートを使用することもできます。例えば：

adb reverse tcp:8081 tcp:3333

これにより、デバイスポート8081がローカルポート3333にリダイレクトされます。

12
Ricardo Stuven