[React Native] EXPO - AxiosError: Network Error on Android but not on IOS

[Mathissou01]

Minimal reproducible example

(https://snack.expo.dev/@mathissou/trusting-orange-hummus)

Summary

Description

**### Describe the bug **

On Android, with Axios my request is returning "AxiosError: Network Error".
But it all work fine on IOS and with POSTMAN too.

The api call uses HTTPS and is not local

### Solution tried:
I have tried many headers type but none works.
Also the ""usesCleartextTraffic": true" in "AndroidManifest.xml" and with "expo-build-properties" is not doing anything.
Downgrading axios at any version do not change anything.
The SSL respond good when I test them with some website SSL tester online.
All the TLS1, TLS2, TLS3 are working.
For me it looks like Android does not make the request correctly.
It does not work in Local and after the build too

Can you please explain to me what is wrong?
Thank you in advance.

### Code snippet of the API request:

const BASE_URL = process.env.EXPO_PUBLIC_API_URL;

const AUTH_URL = `${BASE_URL}auth/`;
const API_URL = `${BASE_URL}api/`;

export async function auth(
  username: string,
  password: string,
  withStoreUpdate: boolean = false
): Promise<{ isAuth: boolean; currentUser?: object }> {
  try {
    const data = { username, password };

    console.log("Auth is Starting");
    const response = await axios({
      method: "POST",
      url: `${AUTH_URL}login`,
      headers: {
        // Set the Content-Type to application/json
        "content-type": "multipart/form-data",
        // Set the Authorization header to JWT followed by the actual token
        authorization: "JWT",
        // Set the Accept header to application/json
        accept: "application/json",
        // You may not need this unless you are making cross-origin requests
        "ccess-Control-Allow-Origin": "*",
      },
      data,
    })
      .then((response: { data: apiData }) => {
        return response.data;
      })
      .catch((error: any) => {
        throw new Error(error);
      });

    myInfos = response;

    if (response) {
      const newAmbassador = new Ambassador(response.user);

      if (withStoreUpdate)
        store.dispatch(
          updateUserWithLocalStorage({
            ...newAmbassador.json,
            password: password,
            accessToken: response.accessToken,
          })
        );
      else
        store.dispatch(
          updateUserInfos({
            ...newAmbassador.json,
            accessToken: response.accessToken,
          })
        );

      return { isAuth: true, currentUser: newAmbassador };
    } else return { isAuth: false };
  } catch (error) {
    if (error.response) {
      console.log("icierror");
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
    } else {
      console.log("the error goes here");
      // Something happened in setting up the request that triggered an Error
      console.log("Error", error.message);
    }
    return { isAuth: false };

### Additional Library Versions :

"dependencies":` { "@expo/config-plugins": "~7.2.2", "@react-native-async-storage/async-storage": "1.18.2", "@react-native-masked-view/masked-view": "0.2.9", "@react-navigation/bottom-tabs": "^6.5.8", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.13", "@react-three/fiber": "^8.13.7", "@reduxjs/toolkit": "^1.9.5", "axios": "1.3.4", "babel-plugin-react-native-classname-to-dynamic-style": "^0.22.0", "babel-plugin-react-native-classname-to-style": "^1.2.2", "babel-plugin-react-native-platform-specific-extensions": "^1.1.1", "chroma-js": "^2.4.2", "expo": "~49.0.11", "expo-asset": "~8.10.1", "expo-checkbox": "~2.4.0", "expo-constants": "~14.4.2", "expo-device": "~5.4.0", "expo-exotic-asset": "^1.0.4", "expo-file-system": "~15.4.4", "expo-gl": "~13.0.1", "expo-linear-gradient": "~12.3.0", "expo-media-library": "~15.4.1", "expo-notifications": "~0.20.1", "expo-splash-screen": "~0.20.5", "expo-status-bar": "~1.6.0", "expo-system-ui": "~2.4.0", "expo-three": "^7.0.0", "lottie-react-native": "5.1.6", "metro-react-native-babel-transformer": "^0.77.0", "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.72.4", "react-native-animatable": "^1.3.3", "react-native-calendars": "^1.1300.0", "react-native-date-picker": "^4.3.3", "react-native-dropdown-picker": "^5.4.6", "react-native-extended-stylesheet": "^0.12.0", "react-native-form-component": "^2.6.12", "react-native-gesture-handler": "~2.12.0", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-reanimated": "~3.3.0", "react-native-safe-area-context": "4.6.3", "react-native-screens": "~3.22.0", "react-native-stylesheet-plus": "^0.3.0", "react-native-svg": "13.9.0", "react-native-view-shot": "3.7.0", "react-native-web": "~0.19.6", "react-redux": "^8.1.2", "three": "^0.145.0", "expo-build-properties": "~0.8.3" }

React Native Version

0.72.4

Output of npx react-native info

System:
OS: Windows 10 10.0.19045
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Memory: 7.15 GB / 15.77 GB
Binaries:
Node:
version: 18.16.0
path: C:\Program Files\nodejs\node.EXE
Yarn:
version: 1.22.19
path: C:\Program Files\nodejs\yarn.CMD
npm:
version: 9.5.1
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowAllTrustedApps: Disabled
IDEs:
Android Studio: Not Found
Visual Studio: Not Found
Languages:
Java: Not Found
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.4
wanted: 0.72.4
react-native-windows: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

Steps to reproduce

none

Snack, screenshot, or link to a repository

none

Environment

expo-env-info 1.0.5 environment info:
System:
OS: Linux 5.4 Ubuntu 20.04.6 LTS (Focal Fossa)
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.1/bin/yarn
npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
npmPackages:
expo: ~49.0.11 => 49.0.11
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
react-native: 0.72.4 => 0.72.4
react-native-web: ~0.19.6 => 0.19.8
Expo Workflow: managed

[Kudo]

hi there! could you try to use some network inspector tool to get more information of the requests? https://docs.expo.dev/debugging/tools/#inspecting-network-traffic

[expo-bot]

Hello! Our GitHub issues are reserved for bug reports.

If you have a question about Expo or related tools, please post on our forums at https://forums.expo.dev/ or join our Discord at https://chat.expo.dev/.

Resources

• "How do I ask a good question?"
• "Join the community"

[Kudo]

will try to follow up your questions here and reopen it if it's confirmed as an issue.

[im-nmashukov]

facing the same issue

[NikMsh]

looks like the problem is related to this topic facebook/react-native#32931 (comment)

[CiprianDraghici]

I have an identical error. Does anyone have a solution for this?
It's reproducible only on the localhost environment, but it's working perfectly with my remote server.

[EmilianoChofis]

I have an identical error. Does anyone have a solution for this? It's reproducible only on the localhost environment, but it's working perfectly with my remote server.

U right, replace "localhost" for the ip and work it

[dembal1990]

I was a same issue. The request was success on IOS, but the Android throw Network Error without response. (In the server the request response status was 200 in both case)

Sample code:

const formData = new FormData()
formData.append("name","*********")
formData.append("country",{
  id:1,
  name: "*****"
})

return await instance.post('profile', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
      accept: 'application/json',
    },
});

The problem caused the county object field.

[4shb0rne]

facing the same issue, any solution ?

[dembal1990]

facing the same issue, any solution ?

In my case I just posted the countryID.
But I guess this should work too:
‘’’
…..
formData.append("country[id]",1)
formData.append("country[name]",”******”)
….
‘’’

[TheAdcarry]

Same problem here, on expo go with ios the request works, but in android dont.

The worst thing, i have 2 urls to make a get requests and the URL's ares the SAME, and one works and the other no.

This ulr works the get:

http://www.fazenda.pr.gov.br/nfce/qrcode?p=41240279052460000466651220002957961004093853|2|1|1|FECEA33AD59F0F75AF914E2381C74E16EBA9901A

And this ulr dont works:

http://www.fazenda.pr.gov.br/nfce/qrcode?p=41240276112408000117650010004403791805415193|2|1|1|D66815698F8409FDD9909DBED2CE5FD7213D4E70

Is the same, just change de ID, like ????

[suhaotian]

If you guys want get the dev ip for develop, here are some useful snippets:

import Constants from 'expo-constants';

const host = Constants.expoGoConfig?.debuggerHost?.split(':')?.[0];
const API_URL = process.env.EXPO_PUBLIC_API_URL || '';

export const baseURL =
  host &&
  (host.startsWith('192.168') || host.startsWith('10.') || host.startsWith('172.')) &&
  (API_URL.indexOf('localhost') > -1 || API_URL.indexOf('127.0.0.1') > -1)
    ? 'http://' + host + ':' + (API_URL.split(':').pop() || '')
    : API_URL;

[JorgeHabib]

I am facing the same issue, if anyone here has the solution I am interested.

[suhaotian]

Try replace "localhost" for the ip? @JorgeHabib

[hotlabs-technology]

same problem here, axios calls work on Expo Go but when I try from the .apk I get network error

[JorgeHabib]

Try replace "localhost" for the ip? @JorgeHabib

I am facing this issue when hitting directly the prod endpoint, not development.

[JorgeHabib]

same problem here, axios calls work on Expo Go but when I try from the .apk I get network error

If you find any solutions for this, I am still facing this same issue.

[iamemmanuel-dev]

Please any solution for this?

[sousaweb]

Im facing the same issue

[johannesfor]

I had the same issue, I have a .net api running on my server and an apache server acting as a proxy. I added my lets encrypt certificate to the apache server. But I didn't add the certification chain file!!! When I added it, it worked. Android apparently requires the chain file for LetsEncrypt certificates.