webentwicklung-frage-antwort-db.com.de

Reagieren Sie native fetch () - Netzwerkanforderung fehlgeschlagen

Wenn ich ein brandneues Projekt mit react-native init (RN-Version 0.29.1) erstelle und einen Abruf in der Render-Methode für die öffentliche Facebook-Demo-Film-API einsetze, wird ein Network Request Failed ausgegeben. Es gibt eine sehr unbrauchbare Stack-Ablaufverfolgung und ich kann Netzwerkanfragen in der Chrome-Konsole nicht debuggen. Hier ist der Fetch, 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);
      });
94
Alek Hurst

Das Problem hierbei ist, dass iOS standardmäßig keine HTTP-Anfragen zulässt, nur HTTPS. Wenn Sie HTTP-Anforderungen aktivieren möchten, fügen Sie dies Ihrem info.plist hinzu:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
124
Alek Hurst

Es wird nicht empfohlen, alle Domänen für http ..__ zuzulassen. Machen Sie eine Ausnahme nur für die erforderlichen Domänen.

Quelle: Konfigurieren von App-Transport-Sicherheitsausnahmen in iOS 9 und OSX 10.11

Fügen Sie der info.plist-Datei 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>
53
Lavi Avigdor

Ich habe localhost für die Adresse verwendet, was offensichtlich falsch war. Nachdem er durch die IP-Adresse des Servers ersetzt wurde (im Netzwerk, in dem sich der Emulator befindet), hat er einwandfrei funktioniert.

Bearbeiten

In Android Emulator lautet die Adresse der Entwicklungsmaschine 10.0.2.2. Weitere Erklärung hier

Bei Genymotion lautet die Adresse 10.0.3.2. Mehr Infos hier

10
Mahmoodvcs

React Native Docs gibt die Antwort darauf.

Apple hat das Laden von impliziten Klartext-HTTP-Ressourcen blockiert. Wir müssen also 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 native Dokumente -> Integration mit vorhandenen Apps -> Testen Sie Ihre Integration -> Hinzufügen einer Ausnahme für die App-Transportsicherheit

8
Ocean Liu

Das Problem kann in der Serverkonfiguration liegen.

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

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

7
Dmitry Maksakov

Für uns war es, weil wir eine Datei hochgeladen hatten und der RN-FilePicker nicht den richtigen Mime-Typ angab. Es gab uns nur ein 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
 })
5
NickJ

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. Allerdings fügt react-native der Debug-Version (Android/app/src/debug/res/xml/react_native_config.xml) eine Netzwerksicherheitskonfiguration hinzu, die einige Domänen (localhost und die Host-IPs für AVD/Genymotion) definiert, die im dev-Modus ohne SSL verwendet werden können. Dort können Sie 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>
3
Johannes Spohr

Für Benutzer von Android:

  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 zeigt, anstatt auf Ihren Computer. Beispiel: change http://localost Zu http://192.168.1.123

  2. Wenn Ihre Anforderungs-URL HTTPS lautet und sich Ihr Android Gerät unter einem Proxy befindet, gehen Sie davon aus, dass Sie eine vom Benutzer hinzugefügte Zertifizierungsstelle (wie die Zertifizierungsstelle von burp suite oder Charles) in Ihrem Android Gerät installiert haben. Stellen Sie sicher, dass Sie Android -Version ist niedriger als Nougat (7.0) , weil: Änderungen an vertrauenswürdigen Zertifizierungsstellen in Android Nougat

    Vom Benutzer hinzugefügte Zertifizierungsstellen
    Der Schutz aller Anwendungsdaten ist ein zentrales Ziel der Android Anwendungs-Sandbox. Android Nougat ändert die Interaktion von Anwendungen mit von Benutzern und Administratoren bereitgestellten Zertifizierungsstellen. Standardmäßig werden Apps, die auf API-Ebene 24 abzielen, diese Zertifizierungsstellen nicht berücksichtigen, sofern die App nicht ausdrücklich aktiviert wird. Diese Standardeinstellung reduziert die Angriffsfläche für Anwendungen und fördert die konsistente Verarbeitung von netzwerk- und dateibasierten Anwendungsdaten.

2
fangxing

Ich hatte dieses Problem für Android-

URL- localhost/authToken.json - hat nicht funktioniert :(

URL-10.106.105.103/authToken.json - funktionierte nicht :(

URL- http://10.106.105.103/authToken.json - bearbeitet :): D

Hinweis- Verwenden Sie ifconfig unter Linux oder ipconfig unter Windows, um die IP-Adresse der Maschine zu finden

2
Varun Kumar

Ich habe ein ähnliches Problem. In meinem Fall funktionierten Anfragen an localhost und wurden plötzlich gestoppt .. Es stellte sich heraus, dass das Problem darin bestand, dass ich mein WLAN auf meinem Android-Handy ausschaltete.

Bei Android haben Sie möglicherweise versäumt, Berechtigungen in AndroidManifest.xml hinzuzufügen Sie müssen die folgenden Berechtigungen hinzufügen.

<uses-permission Android:name="Android.permission.INTERNET" /> 
2
Shashwat

wenn Sie das Andockfenster für die API REST verwenden, bestand ein Arbeitsfall darin, den Hostnamen: http://demo.test/api durch die IP-Adresse des Computers: http://x.x.x.x/api zu ersetzen. Sie können die IP-Adresse erhalten, indem Sie überprüfen, welche IPv4 Sie in Ihrem drahtlosen Netzwerk verwenden. Du solltest auch das WLAN vom Telefon an haben.

1
Craciun Ciprian

Sie sollten den Fehlerfall in .then for fetch API behandeln.

Zum Beispiel:

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

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

import { Platform } from 'react-native';

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

Nur Sie haben Änderungen in Abruf ....

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

Ich bin auf dasselbe Problem im Android Emulator gestoßen, bei dem ich versucht habe, mit einem gültigen Zertifikat auf eine externe HTTPS-URL 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 AndroidManifest.xml das Attribut Android:networkSecurityConfig hinzu

Hinzufügen einer Netzwerksicherheitskonfigurationsdatei 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.

0
henryoats