13

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.

GuillaumeRZ
  • 2,656
  • 4
  • 19
  • 35
  • 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 Jan 14 '19 at 11:27
  • 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 Jan 14 '19 at 11:33
  • 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 Jan 14 '19 at 11:56
  • use this to find your local ip if your server runs on your machine https://www.whatismybrowser.com/detect/what-is-my-local-ip-address – Panagiotis Vrs Jan 14 '19 at 11:59
  • 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 Jan 14 '19 at 12:00
  • this is very strange. you are trying with the port like the others right ? http://192.168.63.141:8000/api – Panagiotis Vrs Jan 14 '19 at 12:07
  • Exactly, like that : http://192.168.63.141:8000/api/ to be sure, I try to add `https`, to remove the port (?). Nothing work, Postman is returning the previous error. The backend is in NodeJS with Hapi (which works totaly fine with `http://localhost:8000/api/`). – GuillaumeRZ Jan 14 '19 at 12:09

2 Answers2

13

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.

Panagiotis Vrs
  • 824
  • 6
  • 16
  • 1
    1. My emulator is working, there is SOME of my routes that return a Network error (which works anyway too...). The URL used to do so is : `http://10.0.2.2:8000/api` which resolve the emulator to the localhost of the current machine. 2. Binding my `host: "localhost"` to `"0.0.0.0"` instead resolve the URL `http://192.168.63.141:8000/api/` which is working fine now. Thank you for that. 3. So I just re-test it again, with `http://192.168.63.141:8000/api/` instead of `localhost` for iOS and `10.0.0.2` for Android, the call are working, but there is still the same "Network Error". – GuillaumeRZ Jan 14 '19 at 12:46
  • I triedm but it seems that it is not relative to this issue... I change the method from POST to GET but I have still the same error – GuillaumeRZ Jan 18 '19 at 10:07
2

Adding these parameter in header resolved my issue

"Content-Type": "application/x-www-form-urlencoded",
  Accept: "application/json"
Waleed Arshad
  • 1,081
  • 3
  • 12
  • 24
  • Wow, thanks! Just noticed that it worked on iOS without those headers. However, on Android they were required. You made my day. – Fabio Dec 13 '21 at 12:20