Network error with axios and android emulator

Question

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.

Answer 1

Adding these parameter in header resolved my issue

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

Answer 2

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.