Wenn ich ein brandneues Projekt mit react-native init
(RN Version 0.29.1) erstelle und einen Abruf in der Rendermethode in die öffentliche Facebook-Demofilm-API einfüge, wird a ausgelöst Network Request Failed
. Es gibt einen sehr nutzlosen Stack-Trace und ich kann keine Netzwerkanforderungen in der Chrome-Konsole debuggen. Hier ist der Abruf, den ich sende:
fetch('http://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
javascript
react-native
fetch-api
Alek Hurst
quelle
quelle
http
->https
(wenn möglich) wird höchstwahrscheinlich Ihr Problem beheben192.168.1.25:3000
von verwendet,ifconfig
ohne meinen Server an diese IP zu bindenrails server --binging=192.168.1.25 --port=3000
Antworten:
Das Problem hierbei ist, dass iOS standardmäßig keine HTTP-Anforderungen zulässt, sondern nur HTTPS. Wenn Sie HTTP-Anforderungen aktivieren möchten, fügen Sie Folgendes hinzu
info.plist
:quelle
Es wird nicht empfohlen, alle Domains für http zuzulassen. Machen Sie eine Ausnahme nur für die erforderlichen Domänen.
Quelle: Konfigurieren von Sicherheitsausnahmen für den App-Transport in iOS 9 und OSX 10.11
Fügen Sie der Datei info.plist Ihrer App Folgendes hinzu:
quelle
Ich habe
localhost
für die Adresse verwendet, was offensichtlich falsch war. Nachdem es durch die IP-Adresse des Servers (in dem Netzwerk, in dem sich der Emulator befindet) ersetzt wurde, funktionierte es einwandfrei.Bearbeiten
In Android Emulator lautet die Adresse des Entwicklungscomputers
10.0.2.2
. Mehr Erklärung hierFür Genymotion lautet die Adresse
10.0.3.2
. Mehr Infos hierquelle
http://<Network IP emulator connects to>:<port where API is served>/api/tasks
Für uns lag es daran, dass wir eine Datei hochgeladen haben und der RN filePicker nicht den richtigen MIME-Typ angegeben hat. Es gab uns nur "Bild" als Typ. Wir mussten es in 'image / jpg' ändern, damit der Abruf funktioniert.
quelle
React Native Docs gibt die Antwort darauf.
Reagieren Sie auf native Dokumente -> Integration mit vorhandenen Apps -> Testen Sie Ihre Integration -> Ausnahme für App Transport Security hinzufügen
quelle
Das Problem liegt möglicherweise in der Serverkonfiguration.
Android 7.0 hat einen hier beschriebenen Fehler . Von Vicky Chijwani vorgeschlagene Problemumgehung:
quelle
Ich habe das gleiche Problem auf Android, aber ich habe es geschafft, eine Lösung dafür zu finden. Android blockiert den Klartextverkehr (Nicht-https-Anfragen) seit API Level 28 standardmäßig. React-native fügt der Debug-Version (
android/app/src/debug/res/xml/react_native_config.xml
) jedoch eine Netzwerksicherheitskonfiguration hinzu, die einige Domänen (localhost und die Host-IPs für AVD / Genymotion) definiert, die im Entwicklungsmodus ohne SSL verwendet werden können. Sie können dort Ihre Domain hinzufügen, um http-Anfragen zuzulassen.quelle
Ich habe das gleiche Problem auf Android 9 aufgrund des "http" und des Problems, das durch einfaches Hinzufügen von android behoben wurde: usingCleartextTraffic = "true" in AndroidManifest.xml
quelle
Ich bin auf dasselbe Problem im Android Emulator gestoßen, bei dem ich versucht habe, auf eine externe HTTPS-URL mit einem gültigen Zertifikat zuzugreifen. Das Abrufen dieser URL in React-Native ist jedoch fehlgeschlagen
1) Um den genauen Fehler in den Protokollen herauszufinden, habe ich zuerst 'JS remote debuggen' mit Cmd + M in der App aktiviert
2) Der gemeldete Fehler war
3) Ich habe das gültige Zertifikat der URL mit dieser Methode hinzugefügt -> SCHRITT 2
Dieses Zertifikat wird der Registerkarte Benutzer hinzugefügt.
4) Fügen Sie das
android:networkSecurityConfig
Attributattribut zu AndroidManifest.xml hinzuFügen Sie eine Netzwerksicherheitskonfigurationsdatei hinzu
res/xml/network_security_config.xml:
Dies sollte funktionieren und Ihnen eine erwartete Antwort geben.
quelle
Ich hatte dieses Problem für Android-
URL- localhost / authToken.json - hat nicht funktioniert :(
URL- 10.106.105.103/authToken.json - hat nicht funktioniert :(
URL- http://10.106.105.103/authToken.json - funktioniert :): D.
Hinweis: Verwenden Sie diese Option
ifconfig
unter Linux oderipconfig
Windows, um die IpAddress des Computers zu findenquelle
Für Android-Nutzer:
Ersetzen Sie
localhost
s durch eine Lan-IP-Adresse, da localhost beim Ausführen des Projekts auf einem Android-Gerät auf das Android-Gerät anstatt auf Ihren Computer zeigt. Beispiel: Wechselnhttp://localost
zuhttp://192.168.1.123
quelle
Für Android haben Sie möglicherweise die Berechtigung in AndroidManifest.xml nicht hinzugefügt. Sie müssen die folgende Berechtigung hinzufügen.
quelle
Ich habe ein ähnliches Problem. In meinem Fall funktionierten Anfragen an localhost und hörten plötzlich auf. Es stellte sich heraus, dass das Problem darin bestand, dass ich mein WLAN auf meinem Android-Handy ausschaltete.
quelle
Dies funktionierte für mich, Android verwendet eine spezielle Art von IP-Adresse 10.0.2.2 dann Portnummer
quelle
Wenn Sie Docker für die REST-API verwenden, bestand ein funktionierender Fall für mich darin, den Hostnamen:
http://demo.test/api
durch die IP-Adresse des Computers zu ersetzen :http://x.x.x.x/api
. Sie können die IP-Adresse ermitteln, indem Sie überprüfen, welche IPv4-Datei in Ihrem drahtlosen Netzwerk vorhanden ist. Sie sollten auch das WLAN vom Telefon aus haben.quelle
Sie sollten den Fehlerfall in .then für die Abruf-API behandeln.
Beispielsweise:
quelle
In
android:usesCleartextTraffic="true"
Zeile in AndroidManifest.xml.Löschen Sie alle Debug-Ordner aus Ihrem Android-Ordner.
quelle
Nur Sie haben Änderungen in Fetch ....
quelle
Wechseln Sie für Android-Geräte zu Ihrem Projektstammordner und führen Sie den folgenden Befehl aus:
z.B,
adb reverse tcp:8088 tcp:8088
Dadurch hört Ihr physisches Gerät (dh das Android-Telefon) den auf Ihrem Entwicklungscomputer (dh Ihrem Computer) laufenden localhost-Server unter der Adresse http: // localhost: [your_own_server_port] ab .
Danach können Sie direkt
http:localhost:[your_port] /your_api
in Ihrem reaktionsnativenfetch(
Aufruf verwenden.quelle
Fügen Sie für Android android: networkSecurityConfig = "@ xml / network_security_config" zum Anwendungstag in AndroidManifest.xml hinzu:
Inhalt der Datei network_security_config.xml:
quelle
Beispiel:
quelle