HTTP requests does not work on my real android device (React Native Expo Tunnel)

Question

I'm facing this issue while posting data to my server via axios.post(). It always catches the error "Network Error" when I run my app on my real android device. But when I use an android emulator device, it works correctly and returns the response. I tried to use "ngrok http 5000" and used the uri that ngrok gave me but that didn't work either. I'm hopeless at this point because my app is using QR code scanner and indie notifications. I'm unable to test it while using emulator. Please help me! I'm leaving my axios.post() method below

const login = async (email, password, navigation) => {
  userState.loading = true;

  axios
    .post(`http://${localIP}:5000/api/user/login`, {
      email,
      password,
    })
    .then((response) => {
      userState.loading = false;
      userState.user = response.data;
      console.log("Data: ", response.data);
      navigation.reset({
        index: 0,
        routes: [{ name: "Home" }],
      });
    })
    .catch((err) => {
      userState.loading = false;
      console.log("ERR :", err.message);
    });
};

I tried to use "ngrok http 5000" and used the uri that ngrok given me but that didn't work either.

Answer 1

Might be a little light on information in order to give a definite answer, it's worth looking at installing a debugger and inspecting the network requests to see where they're going wrong. But here's a couple things to try:

In your AndroidManifest.xml file add the line: <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Use http://my.local.ip:port instead of http://localhost:5000 (looks like you're doing this anyway, if not you get this via ipconfig in Command Prompt)

Try adding "Content-Type": "application/json", Accept: "application/json" headers to your Axios request