React Native fetch, La requête réseau a échoué. Ne pas utiliser localhost

Question

J'ai une application, dans laquelle j'utilise fetch pour authentifier l'utilisateur. Cela fonctionnait jusqu'à il y a quelques jours et je n'ai rien changé. J'ai juste mis à jour de react 0.27 à 0.28, maintenant fetch ne fonctionne pas.

J'ai cherché pendant presque 2 jours et j'ai lu presque toutes les questions sur Stack Overflow. La plupart des utilisateurs essaient de récupérer quelque chose depuis localhost, et quand ils le changent en adresse IP réelle, cela fonctionne. Mais je ne récupère rien depuis localhost, mon code fonctionnait aussi.

Voici mon code:

fetch('http://somesite.com/app/connect', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'language':'en-US',
        'Authorization': 'Bearer ' + access_token,
      },
      body: JSON.stringify({
        uid: uid,
        refresh_token: refresh_token,
        token: access_token,
        device: device_id,
        device_name: device_name,
      })
    })
.then((response) => response.json())
.then((responseData) => {
    console.log(JSON.stringify(responseData.body))
})
.catch((err)=> {
  console.log('Certaines erreurs se sont produites');
  console.log(err);
})
.done();

J'ai essayé de créer de nouveaux projets, simples, j'ai juste utilisé un exemple de fetch simple dans les tutoriels, cela m'a donné la même erreur. J'ai essayé d'ouvrir mon site web auquel j'essaie de me connecter, à travers un navigateur dans l'émulateur, cela fonctionne, mais il semble que mon application ne puisse pas se connecter à un site web/IP. Cela donne cette erreur dans la console Chrome:

TypeError: échec de la requête réseau
    à XMLHttpRequest.xhr.onerror (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:28193:8)
    à XMLHttpRequest.dispatchEvent (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:14591:15)
    à XMLHttpRequest.setReadyState (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:29573:6)
    à XMLHttpRequest.__didCompleteResponse (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:29431:6)
    à http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:29506:52
    à RCTDeviceEventEmitter.emit (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:13428:23)
    à MessageQueue.__callFunction (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:11999:23)
    à http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:11906:8
    à guard (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:11857:1)
    à MessageQueue.callFunctionReturnFlushedQueue (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:11905:1)

En fait, j'ai le même problème que cet utilisateur ici : Les demandes réseau de réagir toujours échouent

info.plist de xcode :

Answer 1

Vous devriez consulter ce lien: https://github.com/facebook/react-native/issues/8118

On dirait que le problème est apparu dans React Native 0.28. La solution consiste à "Autoriser les chargements arbitraires" dans le fichier info.plist trouvé dans le dossier ios>build que React crée.

Si vous ouvrez l'ensemble du dossier ios dans xcode, puis ouvrez ce fichier info.plist, vous pouvez créer une nouvelle clé pour Autoriser les chargements arbitraires et cela devrait résoudre votre problème.

Answer 2

Modifier le fichier info.plist ne fonctionne pas pour moi non plus. J'essaie de lancer sur iOS.

Answer 3

Ce problème est que le code essaie de récupérer un point de terminaison HTTP au lieu de HTTPS, ce qui n'est pas encouragé. Si vous récupérez à partir d'un serveur local, une solution facile sera d'exposer votre serveur local via un endpoint Ngrok en HTTPS.

Étapes:

1. Téléchargez ngrok et exécutez ngrok http 8081 depuis le terminal/cmd, où vous devez changer 8081 par le port de service de votre serveur local.

2. Ngrok vous donnera un endpoint de transfert HTTPS, utilisez simplement celui-ci pour accéder à votre serveur local.