React Native auf Android, Ajax-Aufruf mit Fetch schlägt fehl

Question

Ich entwickle eine Android-App mit React Native. Ich teste meine App auf einer Galaxy Nexus API 23, die in Android Studio emuliert wird und auf einem Mac läuft.

Ich möchte Benutzern erlauben, Informationen miteinander zu teilen. Ich betreibe einen Webserver mit php und mysql, und ich möchte, dass die App Anforderungen an den Server stellt, um Daten zwischen Benutzern zu teilen.

Ich versuche, eine POST-Anfrage an meinen Entwicklungsserver mit der Fetch-API zu machen. Mein js Code ist unten:

var AjaxEngine = { 
    test: function() { 
      return fetch('http://10.0.2.2/test.json') 
       .then((response) => response.json()) 
       .then((responseJson) => { 
        console.log(responseJson); 
        return responseJson.movies; 
       }) 
       .catch((error) => { 
        console.error(error); 
       }); 
     } 
}; 

genannt von AjaxEngine.test();

In meinem Emulator erhalte ich folgende Fehlermeldung:

ExceptionsManager.js:70 TypeError: Network request failed at XMLHttpRequest.xhr.onerror (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:23711:8) at XMLHttpRequest.dispatchEvent (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:9740:15) at XMLHttpRequest.setReadyState (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:25157:6) at XMLHttpRequest.__didCompleteResponse (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:25015:6) at http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:25090:52 at RCTDeviceEventEmitter.emit (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:8977:23) at MessageQueue.__callFunction (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:7065:23) at http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:6969:8 at guard (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:6917:1) at MessageQueue.callFunctionReturnFlushedQueue (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:6968:1)

test.json besteht aus:

{ 
    "message":"hello world" 
} 

Die Anfrage ist erfolgreich, wenn ich 'http://10.0.2.2/test.json' durch ersetze 'http://facebook.github.io/react-native/movies.json', so ist die Funktion selbst in Ordnung.

'http://localhost/test.json' und 'http://127.0.0.1/test.json' beide Lasten in einem Web-Browser, curl und wget. Ich habe auch versucht, die 10.0.2.2 durch 127.0.0.1 zu ersetzen. Ich habe auch versucht, meine lokale IP zu verwenden (129.xxx.x.x)

Was muss ich tun, um diese Anforderungen funktionieren zu lassen? Wie greife ich über die emulierte Android-App auf meinen Entwicklungsserver auf localhost zu?

Answer 1

Wenn Sie zu arbeiten, versuchen Sie die -D Option, die die Header in eine Datei schreibt. Auf diese Weise können Sie sehen, ob beide Anfragen z. der gleiche Mime-Typ.

-D, --dump-header <file> 
      Write the protocol headers to the specified file. 

      This option is handy to use when you want to store the headers 
      that an HTTP site sends to you. Cookies from the headers could 
      then be read in a second curl invocation by using the -b, 
      --cookie option! The -c, --cookie-jar option is a better way to 
      store cookies.