Échec de la requête réseau React Native fetch ()

Lorsque je crée un tout nouveau projet en utilisant react-native init(RN version 0.29.1) et que je mets une extraction dans la méthode de rendu sur l'API publique du film de démonstration Facebook, cela lance un fichier 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 la récupération 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 n'autorise pas les requêtes HTTP par défaut, uniquement HTTPS. Si vous souhaitez activer les requêtes HTTP, ajoutez ceci à votre info.plist:

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

Il n'est pas recommandé d'autoriser tous les domaines pour http. Faites une exception uniquement pour les domaines nécessaires.

Source: Configuration des exceptions de sécurité de transport d'application dans iOS 9 et OSX 10.11

Ajoutez ce qui suit au fichier info.plist 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>

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

Éditer

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

Pour Genymotion, l'adresse est 10.0.3.2. Plus d'infos ici

Pour nous, c'était parce que nous téléchargions un fichier et que RN filePicker ne donnait pas le type de mime approprié. Cela nous a juste donné une «image» en tant que type. Nous devions le changer en 'image / jpg' pour que la récupération fonctionne.

form.append(uploadFileName, {
  uri : localImage.full,
  type: 'image/jpeg',
  name: uploadFileName
 })

React Native Docs donne la réponse à cela.

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

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

React Native Docs -> Intégration avec des applications existantes -> Tester votre intégration -> Ajouter une exception de sécurité de transport d'application

Le problème peut provenir de la configuration du serveur.

Android 7.0 a un bogue 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 faites cela en définissant ssl_ecdh_curve prime256v1;

J'ai eu le même problème sur Android mais j'ai réussi à trouver une solution. Android bloque le trafic en texte clair (demandes non https) depuis le niveau d'API 28 par défaut. Cependant, react-native ajoute une configuration de sécurité réseau à la version de débogage ( android/app/src/debug/res/xml/react_native_config.xml) qui définit certains domaines (localhost et les adresses IP de l'hôte pour AVD / Genymotion), qui peuvent être utilisés sans SSL en mode dev. Vous pouvez y ajouter votre domaine pour autoriser les requêtes http.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
    <domain includeSubdomains="true">dev.local</domain>
  </domain-config>
</network-security-config>

J'ai eu le même problème sur Android 9 à cause du "http" et le problème a été résolu en ajoutant simplement android: usesCleartextTraffic = "true" dans AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<application
  android:usesCleartextTraffic="true"
 .......>
 .......
</application>

Je suis tombé sur le même problème sur l'émulateur Android, où j'ai essayé d'accéder à une URL HTTPS externe avec un certificat valide. Mais la récupération de cette URL dans React-Native a échoué

'fetch error:', { [TypeError: Network request failed]
sourceURL: 'http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false' }

1) Pour trouver l'erreur exacte dans les journaux, j'ai d'abord activé `` Debug JS Remotely '' en utilisant Cmd + M sur l'application

2) L'erreur signalée était

java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.

3) J'ai ajouté le certificat valide de l'URL en utilisant cette méthode -> ÉTAPE 2

http://lpains.net/articles/2018/install-root-ca-in-android/

Ce certificat est ajouté à l'onglet Utilisateur.

4) Ajoutez l'attribut d' android:networkSecurityConfigattribut à AndroidManifest.xml

Ajouter un fichier de configuration de sécurité réseau res/xml/network_security_config.xml:

<network-security-config>
    <base-config>
        <trust-anchors>
            <certificates src="user"/>
            <certificates src="system"/>
        </trust-anchors>
    </base-config>
</network-security-config>

Cela devrait fonctionner et vous donner une réponse attendue.

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 fonctionné :): D

Remarque - Utiliser ifconfigsous Linux ou ipconfigsous Windows pour trouver la machine IpAddress

Pour l'utilisateur Android:

1. Remplacez localhosts par une adresse IP LAN car lorsque vous exécutez le projet sur un appareil Android, localhost pointe vers l'appareil Android, au lieu de votre ordinateur, exemple: changez http://localostenhttp://192.168.1.123

2. Si votre URL de demande est HTTPS et que votre appareil Android est sous un proxy, supposez que vous avez installé CA ajouté par l'utilisateur (comme CA de burp suite ou CA de Charles) sur votre appareil Android, assurez-vous que votre version Android est inférieure à Nougat (7.0) , car : Modifications des autorités de certification approuvées dans Android Nougat
   

   Autorités de certification ajoutées par l'utilisateur La
   protection de toutes les données d'application est un objectif clé du sandbox d'application Android. Android Nougat modifie la façon dont les applications interagissent avec les autorités de certification fournies par les utilisateurs et les administrateurs. Par défaut, les applications qui ciblent le niveau d'API 24 ne respecteront pas, de par leur conception, ces autorités de certification, à moins que l'application ne les opte explicitement. Ce paramètre de sécurité par défaut réduit la surface d'attaque des applications et encourage une gestion cohérente des données d'application basées sur le réseau et les fichiers.

Pour Android, vous avez peut-être manqué d'ajouter l'autorisation dans AndroidManifest.xml. Vous devez ajouter l'autorisation suivante.

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

J'ai un problème similaire. Dans mon cas, les demandes à localhost fonctionnaient et se sont soudainement arrêtées. Il s'est avéré que le problème était que je désactivais mon wifi sur mon téléphone Android.

Cela a fonctionné pour moi, Android utilise un type spécial d'adresse IP 10.0.2.2 puis le numéro de port

import { Platform } from 'react-native';

export const baseUrl = Platform.OS === 'android' ?
    'http://10.0.2.2:3000/'
: 
'http://localhost:3000/';

si vous utilisez docker pour le reste api, un cas de travail pour moi était de remplacer le nom d' hôte: http://demo.test/apil'adresse IP de la machine: http://x.x.x.x/api. Vous pouvez obtenir l'IP en vérifiant quel ipv4 vous avez sur votre réseau sans fil. Vous devriez également avoir le wifi du téléphone.

Vous devez gérer le cas d'erreur dans .then pour extraire l'API.

Par exemple:

fetch(authURl,{ method: 'GET'})
.then((response) => {      
  const statusCode = response.status;
  console.warn('status Code',statusCode);
  if(statusCode==200){
    //success code
  }else{
    //handle other error code
  }      
},(err) => {
  console.warn('error',err)
})
.catch((error) => {
  console.error(error);
  return error;
});

1. Ajoutez une android:usesCleartextTraffic="true"ligne dans AndroidManifest.xml.

2. Supprimez tous les dossiers de débogage de votre dossier Android.

Vous pouvez le gérer en utilisant ceci:

catch((error) => {
      this.setState({
        typing_animation_button: false,
      });
      console.log(error);
      if ('Timeout' || 'Network request failed') {
        toast_show = true;
        toast_type = 'error';
        toast_text = 'Network failure';
      }
      this.setState({
        disable_button: false,
      });
    });

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

Pour les appareils Android, accédez au dossier racine de votre projet et exécutez la commande:

adb reverse tcp:[your_own_server_port] tcp:[your_own_server_port]

par exemple, adb reverse tcp:8088 tcp:8088

Cela permettra à votre appareil physique (par exemple, téléphone Android) d'écouter le serveur localhost exécuté sur votre machine de développement (c'est-à-dire votre ordinateur) à l'adresse http: // localhost: [your_own_server_port] .

Après cela, vous pouvez directement utiliser http:localhost:[your_port] /your_apidans votre fetch(appel react-native ).

Pour Android, ajoutez android: networkSecurityConfig = "@ xml / network_security_config" à la balise d'application dans AndroidManifest.xml, comme ceci:

    <?xml version="1.0" encoding="utf-8"?>
    <manifest ... >
        <application android:networkSecurityConfig="@xml/network_security_config"
                        ... >
            ...
        </application>
    </manifest>

Contenu du fichier network_security_config.xml:

<?xml version='1.0' encoding='utf-8'?>
<network-security-config>
<debug-overrides>
    <trust-anchors>
        <!-- Trust user added CAs while debuggable only -->
        <certificates src="user" />
    </trust-anchors>
</debug-overrides>

<!-- let application to use http request -->
<base-config cleartextTrafficPermitted="true" />
</network-security-config>

Exemple:

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