Échec de la requête réseau de React Native fetch()
quand je crée un tout nouveau projet en utilisant react-native init (version RN 0.29.1) et que je mets un fetch dans la méthode de rendu pour la démo publique de L'API de film facebook, il lance un Network Request Failed . Il y a une trace de pile très inutile et je ne peux pas déboguer les requêtes réseau dans la console chrome. Voici le fetch que j'envoie:
fetch('http://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});
10 réponses
le problème ici est que iOS n'autorise pas les requêtes HTTP par défaut, seulement HTTPS. Si vous voulez activer les requêtes HTTP, ajoutez ceci à votre info.plist :
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
Non recommandé pour autoriser tous les domaines pour http. Faites une exception pour juste les domaines nécessaires.
ajouter ce qui suit à l'info.fichier de votre application:
<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>
Réagir Natif Docs donne la réponse à cette question.
Apple a bloqué implicitement le chargement de ressources HTTP en clair. Nous devons donc ajouter les informations suivantes sur notre projet.fichier plist (ou équivalent).
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
le problème peut être dans la configuration du serveur.
Android 7.0 a un bug décrit ici . Contournement proposé par Vicky Chijwani:
Configure votre serveur pour utiliser la courbe elliptique prime256v1. Pour exemple, dans Nginx 1.10 vous faites ceci en définissant ssl_ecdh_curve prime256v1;
j'utilisais localhost pour l'adresse, ce qui était évidemment faux. Après le remplaçant par l'adresse IP du serveur (dans le réseau que l'émulateur est), il a parfaitement fonctionné.
Modifier
dans L'émulateur Android, l'adresse de la machine de développement est 10.0.2.2 . Plus d'explications ici
pour Android, vous avez peut-être oublié d'ajouter la permission dans AndroidManifest.XML Besoin d'ajouter de l'autorisation suivante.
<uses-permission android:name="android.permission.INTERNET" />
j'ai le même problème. Dans mon cas, les demandes à localhost fonctionnaient et se sont soudainement arrêtées. Il apparaît que le problème était que j'étais éteindre mon wifi sur mon téléphone android.
juste vous avez des changements dans 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);
});
j'avais ce problème pour Android -
URL-localhost / authToken.json-n'a pas fonctionné: (
URL-10.106.105.103 / authToken.json-n'a pas fonctionné: (
URL - http://10.106.105.103/authToken.json - ouvré:): d
Note-utiliser ifconfig sous Linux ou ipconfig sous Windows pour trouver l'adresse IP de la machine
exemple:
return fetch('http://<your ip>')
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson)
})
.catch((error) => {
console.error(error);
});