2016-07-17 9 views
54

Wenn ich ein brandneues Projekt mit react-native init (RN Version 0.29.1) erstelle und einen Abruf in die Rendermethode für die öffentliche Facebook-Demo-Movie-API lege, wird ein Network Request Failed ausgelöst. Es gibt einen sehr nutzlosen Stack-Trace und ich kann keine Netzwerkanforderungen in der Chrome-Konsole debuggen. Hier ist der Abruf, den ich sende:Reactive Native fetch() Netzwerkanforderung fehlgeschlagen

+0

Ich bin mir nicht sicher. Ich benutze den iOS-Simulator und ich dachte, es verwendet die Internetverbindung meines Computers –

+0

Versuchen Sie, den Simulator manuell zu laden und öffnen Sie die URL in Safari – FuzzyTree

+4

'http' ->' https' (wenn möglich) wird höchstwahrscheinlich Ihr Problem beheben –

Antwort

66

Das Problem hier war, dass iOS HTTP-Anfragen standardmäßig nicht erlaubt, nur https Wenn Sie HTTP-Anfragen aktivieren möchten, fügen Sie diese zu Ihrer info.plist hinzu:

+1

Diese Antwort hat für mich gearbeitet. Für andere neu zu React Native, diese Datei (info.plist) kann auch über xcode bearbeitet werden: http://stackoverflow.com/a/38219454/1299792 – Marklar

+0

seine nicht hinzufügen, sondern ersetzen. Der Code befindet sich bereits in der Datei info.plist. Sie müssen den Abschnitt ersetzen oder Sie erhalten einen Fehler. – osuthorpe

+14

was ist mit Android? Ich habe dasselbe Problem auch bei Android. – Kumar

45

Nicht empfohlen, alle Domänen für http zuzulassen. Machen Sie eine Ausnahme nur für die erforderlichen Domänen.

Quelle: Configuring App Transport Security Exceptions in iOS 9 and OSX 10.11

Fügen Sie den folgenden auf die info.plist Datei Ihrer App:

<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> 
+7

was ist mit Android? – arisalexis

+3

Es scheint mehrere Info.plist-Dateien in mehreren Verzeichnissen in meiner React Native App zu geben. Irgendeine Idee, welcher Ordner die korrekte zu ändernde Datei enthält? – Marklar

+2

@Marklar [Ihr_Projektordner_Name]/ios/[Ihr_Projektordner_Name] /Info.plist – Stich

2

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

india Reagieren Docs gibt die Antwort dafür.

Apple hat das implizite Klartext-HTTP-Ressourcenladen blockiert. Daher müssen wir die Datei Info.plist (oder gleichwertig) unseres Projekts hinzufügen.

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

React Native Docs -> Integration With Existing Apps -> App Transport Security

1

Für Android, haben Sie die Erlaubnis in AndroidManifest.xml hinzufügen verpasst Sie möchten die folgende Berechtigung hinzuzufügen.

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

Das Problem kann in der Serverkonfiguration sein.

Android 7.0 hat einen Fehler described here. Die von Vicky Chijwani vorgeschlagene Problemumgehung:

Konfigurieren Sie Ihren Server, um die elliptische Kurve prime256v1 zu verwenden. Für Beispiel, in Nginx 1.10 tun Sie dies, indem Sie ssl_ecdh_curve setzen prime256v1;

0

Ich benutzte localhost für die Adresse, die offensichtlich falsch war. Nach dem Ersetzen durch die IP-Adresse des Servers (in dem Netzwerk, das der Emulator ist), funktionierte es perfekt.

Verwandte Themen