web-dev-qa-db-fra.com

Axios (dans React-native) n'appelle pas le serveur dans localhost

Je construis une application vraiment facile api et réagit-native. Le serveur fonctionne bien (testé avec PostMan) mais l'application n'appelle pas le serveur. Il bloque quand axios doit envoyer la demande de publication (voir ci-dessous).

Je suis désespéré :-( Je perds trop de temps. S'il vous plaît, si vous pouvez m'aider ...

Voici ma page de code de connexion. Il envoie le créateur de l'action (travaillant avec redux) en donnant l'email et le mot de passe:

...
const LogIn = React.createClass({
  submitLogin() {
    // log in the server
    if (this.props.email !== '' && this.props.psw !== '') {
      if (this.props.valid === true) {
        this.props.dispatch(logIn(this.props.email, this.props.psw));
      } else {
        this.props.dispatch(errorTyping());
      }
    }
  },
...

l'email et le mot de passe sont bien récupérés et envoyés au créateur de l'action:

import axios from 'axios';
import { SIGNIN_URL, SIGNUP_URL } from '../api';
// import { addAlert } from './alerts';
exports.logIn = (email, password) => {
  return function (dispatch) {    
    console.log(email);
    console.log(password);
    console.log(SIGNIN_URL);
    return axios.post(SIGNIN_URL, { email, password })
    .then(
      (response) => {
        console.log(response);
        const { token, userId } = response.data;
        dispatch(authUser(userId));
      }
    )
    .catch(
      (error) => {
        console.log('Could not log in');
      }
    );
  };
};
const authUser = (userId) => {
 return {
 type: 'AUTH_USER',
 userId
 };
};
...

Les trois console.log () avant axios affichent les données de manière correcte. SIGNIN_URL est exactement le même que j'utilise dans postman. ... mais axios n'appelle pas.

Juste pour donner toutes les cartes, voici mon magasin:

import thunk from 'redux-thunk';
import { createStore, compose, applyMiddleware } from 'redux';
import { AsyncStorage } from 'react-native';
import { persistStore, autoRehydrate } from 'redux-persist';
import reducer from '../reducer';
const defaultState = {};
exports.configureStore = (initialState = defaultState) => {
 const store = createStore(reducer, initialState, compose(
 applyMiddleware(thunk),
 autoRehydrate()
 ));
 persistStore(store, { storage: AsyncStorage });
 return store;
};

Il n'y a pas de message d'erreur dans le débogueur (mais celui donné par l'appel à axios ('Connexion impossible')

Je suis sur Windows 10, avec:

"axios": "^0.15.3",
"react": "15.4.2",
"react-native": "0.38.0",
"redux": "^3.6.0"

L'appel échoue même lorsque je prépare un simple appel GET et que le serveur est censé restituer un message simple (testé avec postman et navigateur):

exports.test = () => {
  return function () {
    return axios.get('https://localhost:3000/v1/test')
    .then(
      (response) => {
        console.log(response);
      }
    )
    .catch(
      (error) => {
        console.log('error');
      }
    );
  };
};

Enfin, j’ai aussi essayé de modifier l’appel en ajoutant un en-tête, car l’API est codée pour accepter json:

const head = {
  headers: { 'Content-Type': 'application/json' }
};

exports.test = () => {
  return function () {
    return axios.get('https://api.github.com/users/massimopibiri', head)
    .then(
      (response) => {
        console.log(response);
      }
    )
    .catch(
      (error) => {
        console.log('error');
      }
    );
  };
};

mais même cela n'a pas fonctionné. J'espère que quelqu'un peut m'aider. D'autres problèmes similaires ne l'ont pas été.

node.jsreact-nativeaxios
9
Pibo

La solution est venue d'une source différente, mais je la poste ici pour aider les autres à la recherche du même problème. Fondamentalement, j'ai utilisé Android AVD (émulateur) pour créer l'application. Mais l'émulateur est en fait une autre machine et c'est pourquoi il n'a pas pu appeler le localhost.

Pour résoudre le problème, j'ai dû envoyer la demande de la manière suivante:

https://10.0.2.2:3000/v1/test

au lieu de:

https://localhost:3000/v1/test
18
Pibo

si vous utilisez Mac, cette solution a fonctionné pour moi . J'utilise React Native avec Android Simulator ADV. Nexus Api 27

            axios.get('http://192.168.1.21:8686/api/v1/test')
            .then(response => console.log(response))
            .catch(err => console.log(err));

où l'ip 192.168.1.21 est de system preferences > Network > Advanced > TCP/IP > IPv4 Address

J'ai également testé axios.get('http://10.0.2.2:8686/bec/api/v1/test'), où 10.0.2.2 est l'hôte local de la machine virtuelle à l'ordinateur mais n'a pas fonctionné.

2
roll

J'ai trouvé une autre solution au problème axios.get ne réagissant pas au problème natif: 

Problème: - Objet non visible et erreur: promesse non gérée. Erreur réseau Solution: - Utilisez la commande ci-dessous:

= >>> npm install -g --save axios 

au lieu de npm, installez --save axios i.e. Utilisez -g.

Et vérifiez également si votre émulateur dispose d'une connexion Internet.

Si votre émulateur ne dispose pas de connexion Internet et affiche une erreur telle que: La sonde DNS a terminé la configuration incorrecte, puis ARRÊTEZ l'émulateur Android STUDIO et exécutez ces deux commandes dans le terminal

1. >> C:\Users\Admin\AppData\Local\Android\sdk\emulator\emulator.exe -list-avds​

Ma sortie:

  • Pixel_XL_API_27

Le plus grand centre commercial

Après cette étape, vous obtiendrez le nom de avds.

exemple: - Pixel_XL_API_27

Maintenant, lancez la commande ci-dessous: -

2. >> C:\Users\Admin\AppData\Local\Android\sdk\emulator\emulator.exe -avd Pixel_XL_API_27 -dns-server 8.8.8.8​

1
Akshay Vyas

Une autre solution consiste à créer un réseau hébergé sur l'ordinateur localhost avec les commandes suivantes de la commande admin cmd:

netsh wlan set hostednetwork mode=allow ssid=wifi_name key=wifi_password
netsh wlan start hostednetwork

Connectez votre appareil au point d'accès de l'ordinateur, puis obtenez l'ip de l'ordinateur en exécutant:

ipconfig

Maintenant, obtenez l'adresse IPV4 et mettez-la sur l'URL axios/fetch de l'application, 

axios.get('https://192.168.137.1:3000/api')
.then(
  (response) => {
    console.log(response);
  }
)
.catch(
  (error) => {
    console.log('error');
  }
);

}; };

et ça devrait marcher maintenant!

0
Waweru wa Kamau

Votre émulateur est un périphérique qui ne fonctionne pas sur la même adresse IP (localhost ou 127.0.0.1) que votre navigateur Web, votre agent ou votre serveur.

Afin de faire une demande à votre serveur à partir de votre émulateur, vous devez accéder à votre serveur via l'adresse IP de votre ordinateur: Sous Windows, obtenez votre adresse IP en exécutant ipconfig à l'invite de commande 

Sur le terminal Unix (Linux, Mac OS), exécutez ifconfig pour obtenir votre adresse IP.

Au lieu de http: // localhost: port, vous devez utiliser http: // votre_adresse IP: port 

Je ne l'ai pas testé sous Linux, Mac OS mais cela fonctionne parfaitement sous Windows!

0
Peter Moses Mohemos