Reaktion Native fetch () Netzwerkanforderung fehlgeschlagen

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);
      });

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:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

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:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>yourserver.com</key>
    <dict>
      <!--Include to allow subdomains-->
      <key>NSIncludesSubdomains</key>
      <true/>
      <!--Include to allow HTTP requests-->
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <true/>
      <!--Include to specify minimum TLS version-->
      <key>NSTemporaryExceptionMinimumTLSVersion</key>
      <string>TLSv1.1</string>
    </dict>
  </dict>
</dict>

Ich habe localhostfü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 hier

Für Genymotion lautet die Adresse 10.0.3.2. Mehr Infos hier

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.

form.append(uploadFileName, {
  uri : localImage.full,
  type: 'image/jpeg',
  name: uploadFileName
 })

React Native Docs gibt die Antwort darauf.

Apple hat das Laden impliziter Klartext-HTTP-Ressourcen blockiert. Daher müssen wir die folgende Info.plist-Datei (oder eine gleichwertige Datei) unseres Projekts hinzufügen.

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

Reagieren Sie auf native Dokumente -> Integration mit vorhandenen Apps -> Testen Sie Ihre Integration -> Ausnahme für App Transport Security hinzufügen

Das Problem liegt möglicherweise in der Serverkonfiguration.

Android 7.0 hat einen hier beschriebenen Fehler . Von Vicky Chijwani vorgeschlagene Problemumgehung:

Konfigurieren Sie Ihren Server für die Verwendung der elliptischen Kurve prime256v1. In Nginx 1.10 tun Sie dies beispielsweise, indem Sie ssl_ecdh_curve prime256v1 festlegen.

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.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
    <domain includeSubdomains="true">dev.local</domain>
  </domain-config>
</network-security-config>

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

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<application
  android:usesCleartextTraffic="true"
 .......>
 .......
</application>

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

'fetch error:', { [TypeError: Network request failed]
sourceURL: 'http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false' }

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

java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.

3) Ich habe das gültige Zertifikat der URL mit dieser Methode hinzugefügt -> SCHRITT 2

http://lpains.net/articles/2018/install-root-ca-in-android/

Dieses Zertifikat wird der Registerkarte Benutzer hinzugefügt.

4) Fügen Sie das android:networkSecurityConfigAttributattribut zu AndroidManifest.xml hinzu

Fügen Sie eine Netzwerksicherheitskonfigurationsdatei hinzu res/xml/network_security_config.xml:

<network-security-config>
    <base-config>
        <trust-anchors>
            <certificates src="user"/>
            <certificates src="system"/>
        </trust-anchors>
    </base-config>
</network-security-config>

Dies sollte funktionieren und Ihnen eine erwartete Antwort geben.

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 ifconfigunter Linux oder ipconfigWindows, um die IpAddress des Computers zu finden

Für Android-Nutzer:

1. Ersetzen Sie localhosts 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: Wechseln http://localostzuhttp://192.168.1.123

2. Wenn Ihre Anforderungs-URL HTTPS lautet und sich Ihr Android-Gerät unter einem Proxy befindet, nehmen Sie an, dass Sie eine vom Benutzer hinzugefügte Zertifizierungsstelle (wie die Zertifizierungsstelle der Burp Suite oder die Zertifizierungsstelle von Charles) auf Ihrem Android-Gerät installiert haben. Stellen Sie sicher, dass Ihre Android-Version unter Nougat (7.0) liegt , da : Änderungen an vertrauenswürdigen Zertifizierungsstellen in Android Nougat
   

   Vom Benutzer hinzugefügte Zertifizierungsstellen Der
   Schutz aller Anwendungsdaten ist ein Hauptziel der Sandbox für Android-Anwendungen. Android Nougat ändert die Interaktion von Anwendungen mit von Benutzern und Administratoren bereitgestellten Zertifizierungsstellen. Standardmäßig werden Apps, die auf API-Ebene 24 abzielen, solche Zertifizierungsstellen standardmäßig nicht berücksichtigen, es sei denn, die App entscheidet sich ausdrücklich dafür. Diese Standardeinstellung für die Sicherheit reduziert die Angriffsfläche von Anwendungen und fördert den konsistenten Umgang mit netzwerk- und dateibasierten Anwendungsdaten.

Für Android haben Sie möglicherweise die Berechtigung in AndroidManifest.xml nicht hinzugefügt. Sie müssen die folgende Berechtigung hinzufügen.

<uses-permission android:name="android.permission.INTERNET" /> 

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.

Dies funktionierte für mich, Android verwendet eine spezielle Art von IP-Adresse 10.0.2.2 dann Portnummer

import { Platform } from 'react-native';

export const baseUrl = Platform.OS === 'android' ?
    'http://10.0.2.2:3000/'
: 
'http://localhost:3000/';

Wenn Sie Docker für die REST-API verwenden, bestand ein funktionierender Fall für mich darin, den Hostnamen: http://demo.test/apidurch 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.

Sie sollten den Fehlerfall in .then für die Abruf-API behandeln.

Beispielsweise:

fetch(authURl,{ method: 'GET'})
.then((response) => {      
  const statusCode = response.status;
  console.warn('status Code',statusCode);
  if(statusCode==200){
    //success code
  }else{
    //handle other error code
  }      
},(err) => {
  console.warn('error',err)
})
.catch((error) => {
  console.error(error);
  return error;
});

1. In android:usesCleartextTraffic="true"Zeile in AndroidManifest.xml.

2. Löschen Sie alle Debug-Ordner aus Ihrem Android-Ordner.

Nur Sie haben Änderungen in Fetch ....

fetch('http://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
        /*return responseJson.movies; */
        alert("result:"+JSON.stringify(responseJson))
        this.setState({
            dataSource:this.state.dataSource.cloneWithRows(responseJson)
        })
     }).catch((error) => {
         console.error(error);
     });

Wechseln Sie für Android-Geräte zu Ihrem Projektstammordner und führen Sie den folgenden Befehl aus:

adb reverse tcp:[your_own_server_port] tcp:[your_own_server_port]

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_apiin Ihrem reaktionsnativen fetch(Aufruf verwenden.

Fügen Sie für Android android: networkSecurityConfig = "@ xml / network_security_config" zum Anwendungstag in AndroidManifest.xml hinzu:

    <?xml version="1.0" encoding="utf-8"?>
    <manifest ... >
        <application android:networkSecurityConfig="@xml/network_security_config"
                        ... >
            ...
        </application>
    </manifest>

Inhalt der Datei network_security_config.xml:

<?xml version='1.0' encoding='utf-8'?>
<network-security-config>
<debug-overrides>
    <trust-anchors>
        <!-- Trust user added CAs while debuggable only -->
        <certificates src="user" />
    </trust-anchors>
</debug-overrides>

<!-- let application to use http request -->
<base-config cleartextTrafficPermitted="true" />
</network-security-config>

Beispiel:

return fetch('http://<your ip>')
  .then((response) => response.json())
  .then((responseJson) => {
    console.log(responseJson)
  })
  .catch((error) => {
    console.error(error);
  });