2016-07-17 57 views
54

Quando creo un nuovo progetto utilizzando react-native init (RN versione 0.29.1) e inserisco il metodo di rendering nell'API del film demo pubblico di Facebook, esso genera uno Network Request Failed. C'è una traccia di stack inutile e non riesco a eseguire il debug delle richieste di rete nella console di Chrome. Ecco il recupero che sto inviando:React Native fetch() Richiesta di rete non riuscita

fetch('http://facebook.github.io/react-native/movies.json') 
     .then((response) => response.json()) 
     .then((responseJson) => { 
     return responseJson.movies; 
     }) 
     .catch((error) => { 
     console.error(error); 
     }); 
+0

Non ne sono sicuro. Sto usando il simulatore iOS e ho pensato che usasse la connessione internet del mio computer –

+0

Prova a caricare il simulatore manualmente e apri l'url in safari – FuzzyTree

+4

'http' ->' https' (se possibile) molto probabilmente sistemeremo il tuo problema –

risposta

66

Il problema qui era che iOS non consente le richieste http di default, solo https. Se si desidera abilitare le richieste http, aggiungere questo a info.plist:

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

Questa risposta ha funzionato per me Per gli altri nuovi di React Native, questo file (info.plist) può anche essere modificato tramite xcode: http://stackoverflow.com/a/38219454/1299792 – Marklar

+0

non aggiungere ma sostituire. Il codice è già in info.plist, è necessario sostituire la sezione o si otterrà un errore. – osuthorpe

+14

e per quanto riguarda Android? Sto affrontando lo stesso problema anche in Android. – Kumar

45

Si consiglia di non consentire tutti i domini per http. Crea un'eccezione solo per i domini necessari.

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

Aggiungere il seguente al file info.plist della vostra applicazione:

<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

e per Android? – arisalexis

+3

Sembra che ci siano più file info.plist in più directory nella mia app React Native. Qualche idea su quale cartella contiene il file corretto da cambiare? – Marklar

+2

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

2

Proprio voi hanno variazioni di 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

Reagire Native Docs dà la risposta per questo.

Apple ha bloccato il caricamento di risorse HTTP di testo implicito in chiaro. Quindi dobbiamo aggiungere il seguente file Info.plist (o equivalente) del nostro progetto.

<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

per Android, si può avere perso il permesso di aggiungere in AndroidManifest.xml bisogno di aggiungere la seguente autorizzazione.

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

Il problema potrebbe essere nella configurazione del server.

Android 7.0 ha un errore described here. Soluzione proposta da Vicky Chijwani:

Configurare il server per utilizzare la curva ellittica prime256v1. Per esempio , in Nginx 1.10 lo si fa impostando ssl_ecdh_curve prime256v1;

0

Stavo usando localhost per l'indirizzo, la strega era ovviamente sbagliata. Dopo averlo sostituito con l'indirizzo IP del server (nella rete l'emulatore è), ha funzionato perfettamente.

Problemi correlati