React Native fetch () a échoué la requête réseau

Lorsque je crée un nouveau projet en utilisant react-native init -RN react-native init (RN version 0.29.1) et que je place une extraction dans la méthode de rendu sur l’API de vidéo de démonstration publique de Facebook, une Network Request Failed . Il existe une trace de stack 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); }); 

Le problème ici est qu’iOS ne permet pas les requêtes HTTP par défaut, seulement HTTPS. Si vous souhaitez activer les requêtes HTTP, ajoutez ceci à votre info.plist :

 NSAppTransportSecurity  NSAllowsArbitraryLoads   

Pas recommandé d’autoriser tous les domaines pour http. Faites une exception pour les seuls domaines nécessaires.

Source: Configuration des exceptions de sécurité App Transport dans iOS 9 et OSX 10.11

Ajoutez ce qui suit au fichier info.plist de votre application:

 NSAppTransportSecurity  NSExceptionDomains  yourserver.com   NSIncludesSubdomains   NSTemporaryExceptionAllowsInsecureHTTPLoads   NSTemporaryExceptionMinimumTLSVersion TLSv1.1    

React Native Docs donne la réponse à cette question.

Apple a bloqué le chargement implicite des ressources HTTP en texte clair. Nous devons donc append le fichier Info.plist (ou équivalent) suivant de notre projet.

 NSExceptionDomains  localhost  NSTemporaryExceptionAllowsInsecureHTTPLoads    

React Native Docs -> Intégration avec les applications existantes -> App Transport Security

Le problème peut être dans la configuration du serveur.

Android 7.0 a un bug décrit ici . Solution de contournement proposée par Vicky Chijwani:

Configurez votre serveur pour utiliser la courbe elliptique prime256v1. Par exemple, dans Nginx 1.10, vous le faites en définissant ssl_ecdh_curve prime256v1;

J’utilisais localhost pour l’adresse, ce qui était évidemment faux. Après l’avoir remplacé par l’adresse IP du serveur (dans le réseau que l’émulateur est), cela a fonctionné parfaitement.

modifier

Dans Android Emulator, l’adresse de la machine de développement est 10.0.2.2 . Plus d’explications ici

Pour Android, vous avez peut-être manqué d’append une autorisation dans AndroidManifest.xml. Vous devez append la permission suivante.

  

J’ai un problème similaire. Dans mon cas, les demandes adressées à localhost fonctionnaient et s’arrêtaient soudainement. Il se trouve que le problème était que j’étais éteint 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.ssortingngify(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 – a travaillé :): D

Remarque: utilisez ifconfig sous Linux ou ipconfig sous Windows pour trouver la machine IpAddress

Exemple:

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