12
votes

I got a React-Native application working with a NodeJS backend which serves an API.

My React-Native front is using Expo and Axios to hit on a route of my NodeJS API (using Hapi, Joi, Knex), which will (for the example) update my DB (MySQL).

Everything works properly with my iOS simulator. However, on Android Emulator, SOME of my hits on route ""does not work"" with the following error message : Network Error - node_modules/axios/lib/core/createError.js:16:24 in createError (actually, it worked, but the front does not detect it...)

This is strange, because like I said, this is ONLY for some of my route. I changed the http://localhost:8000/api to http://10.0.2.2:8000/api to be sure that Android Emulator access my API, and it is ok for this part.

The buggy route is working properly on iOS, and is working properly on Insomnia / Postman ( localhost:8000/api/sendMail ). It is working on Android Emulator, but the application does not detect it.

This is an example of my code :

FRONT -- On press of my button "SendEmail" :

/* Button.js */
const sendAndEmailPromise = await sendEmail(this.state.email);

console.log(sendAndEmailPromise); // Output : NOTHING (not undefined, not null, N O T H I N G).

if (sendAndEmailPromise.status === 200) {
    // handle it
} else (sendAndEmailPromise.status === 403) {
    // etc. for each of my codeStatus that can be returned by my API 
}

/* MyAPI.js */
export function sendEmail(mail) {
    return axiosInstance
    .post(`/sendEmail`, null, {
      params: {
        mail
      },
    })
    .then(response => response) // Will not enter here
    .catch(error => {
       console.log(error); // Will output : NETWORK ERROR
    });
}

BACK -- This is the sendEmail promise :

// Will return true of false :
const isMailSend = await sendTheEmail(mail);
console.log(isMailSend); // Output : TRUE and I receive the email on my gmail, so Android Emulator HIT the route.

if (isMailSend) {
  return handler
    .response({
      data: {
        message: "Email sent.",
      },
    })
    .code(200);
} else {
  // Handle it and return another response
}

I expect my front to now that everything works fine (which actually happened...) and get the code status of that, instead of a "Network error".

More, is it possible with Axios to get another level of error ? Something more specific.

A GitHub issue which is not totally the same but seems to relate something equivalent : https://github.com/axios/axios/issues/973

Thank you.

2
have you tried your server external ip on the device instead of using localhost domain? localhost on the device will not work for sure. Axios works 100% on android since i am using it on several projects. - Panagiotis Vrs
Thank you for your reply. Why do you exactly mean by "external ip" ? Right now, I am using http://10.0.2.2:8000/api on the android emulator (instead of localhost). The route-call is working (because the mail is sent), however, It enter in the catch() with a generic error... Thank you for your time. - GuillaumeRZ
external ip i mean your current server ip for global access (ipv4). You must use your server ip if its in localhost this might be something like 192.168.1.1 e.g. What OS are you using? - Panagiotis Vrs
use this to find your local ip if your server runs on your machine whatismybrowser.com/detect/what-is-my-local-ip-address - Panagiotis Vrs
I am running that with EXPO on MacOS Mojave. When I try to reach my IPV4 (Pref. > Network > 192.168.63.141) with Postman I got : "Error: Couldn't connect to server" - GuillaumeRZ

2 Answers

13
votes

You are dealing with two problems here:

1) your emulator doesnt work because it cannot resolve the word "localhost" to an ip. is like using localhost2.com it will not resolve to something. This must be pointed to the local ip of your server 192.x.x.x

2) you server must be binded to 0.0.0.0 because by binding it to localhost it cannot resolve to local requests like 192.x.x.x. If you fix the binding your emulator would have the possibility to see the server and postman will too.

0
votes

Adding these parameter in header resolved my issue

"Content-Type": "application/x-www-form-urlencoded",
  Accept: "application/json"