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