Network error with axios and react native

If you are trying to call localhost on android simulator created with AVD, replacing localhost with 10.0.2.2 solved the issue for me.

If you do not find your answer in other posts

In my case, I use Rails for the backend and I tried to make requests to http://localhost:3000 using Axios but every time I got Network Error as a response. Then I found out that I need to make a request to http://10.0.2.2:3000 in the case of the android simulator. For the iOS simulator, it works fine with http://localhost:3000.

Conclusion

use

http://10.0.2.2:3000 

instead of

http://localhost:3000 

update

might worth trying

adb reverse tcp:3000 tcp:3000 

1. change from localhost to your ip(192.168.43.49)

2. add http://

   http://192.168.43.49:3000/user/

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

For me, the issue was because my Remote URL was incorrect. If you have the URL is a .env file, please crosscheck the naming and also ensure that it's prefixed with REACT_APP_ as react might not be able to find it if named otherwise.

In the .env file Something like REACT_APP_BACKEND_API_URL=https://appurl/api can be accessed as const { REACT_APP_BACKEND_API_URL } = process.env;

If you are using android then open your command prompt and type ipconfig. Then get your ip address and replce it with localhost.

In my case, first I used http://localhost:8080/api/admin/1. Then I changed it to http://192.168.1.10:8080/api/admin/1. It worked for me.

Above mentioned answers only works if you are using localhost but if your code is hosted on a server and Axios throwing Network Error then you can solve this by adding one line.

const config = { method: 'post', url: `${BASE_URL}/login`, headers: { 'Content-Type': 'multipart/form-data'. <----- Add this line in your axios header }, data : formData }; axios(config).then((res)=> console.log(res)) 

For me adding "Accept" in headers resolved the problem:

Accept: 'application/json' 

If both your React Native application and your service are on the same local network, you can access your service using your local network IP.

1. Find Your Local IP Address:

• On your computer where the service is running, open a terminal and run the following command:

ifconfig

• Look for your network interface (usually eth0 or en0) and find the inet address. It will be something like 192.168.x.x or 10.x.x.x. This is your local IP address.

2. Update Your React Native App:

• In your React Native app, make sure you're using the local IP address of your computer instead of localhost or 127.0.0.1 to make requests to your service.

• Replace http://localhost:8080 or similar with http://your-local-ip:8080 (replace your-local-ip with the actual IP address you found in step 1).

• For example, if your local IP is 192.168.1.100 and your service is running on port 8080, your URL would be http://192.168.1.100:8080.

3. Test on Other Devices:

• Make sure your React Native app is running on a device or emulator connected to the same local network.

• Access the service using the local IP address you found in step 1.

• For example, if your local IP is 192.168.1.100, you would access the service on other devices using http://192.168.1.100:8080.

This should allow devices on your local network to communicate with your service. Remember to ensure that your firewall or security settings allow incoming connections on the specified port (in this case, 8080).

in my case it was .env file , dont know why when i calling directly by adding url in the api its working fine but when i tried to call the api using the url inside .env which is working fine in expo start but it is not working when i tried to build apk and test it , then i made a little test by printing the url from the .env which gave me an error with apk. https://www.npmjs.com/package/react-native-dotenv us this to resolve the issue

 export const apiClient = axios.create({ baseURL: `http://${Platform.OS == 'android' ? '10.0.2.2' : 'localhost'}:8080/api/v1`, }); 

When using an Android emulator (AVD), localhost refers to the emulator itself, not your computer. To access a server running on your host machine, use 10.0.2.2 instead of localhost. This fixed the issue for me.

I was facing the same issue.

i looked deeper and my

endpoint url was not correct.

By giving axios right exact url, my api worked like charm.

Hope it may help anyone

Make sure to change localhost to your_ip_address which you can find by typing ipconfig in Command Prompt

Trying adding to your AndroidManifest.xml

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

I'm using apisauce dependancy & Adding header work for me with React Native Android.

Attach header with request like below:

import { create } from 'apisauce'; const api = create({ baseURL: {baseUrl}, headers: { Accept: 'application/json', 'Content-Type': 'application/json' } }); export async function empLogin(data) { try { const response = api.post('Login', data); return await response; } catch (error) { console.log(error); return []; } } 

If you are having issues while connecting to localhost from react-native app. you can do following steps

1- goto cmd type ipconfig. 2- replace localhost with your ip version 4 3- try again.. it will succeed.

it works for me.

Before:

axios.get("http://localhost:3456/apt") .then( response => { alert(JSON.stringify(response)); .... } ) .catch(function(error) { alert(error.message); console.warn(error.response._response); }); 

I was getting the following error:

Error "Network error" Failed to connect to the localhost

After that, I made some steps to resolve the error.

Network Error related to axios resolved by disabling the system firewall and access from the system IP Address like:

axios.get("http://192.168.12.10:3456/apt") .then( response => { alert(JSON.stringify(response)); .... } ) .catch(function(error) { alert(error.message); console.warn(error.response._response); }); 

Background : App stack

We faced the same error 'axios network error 500'. We use an nginx proxy to forward all requests to an internal python Tornado server running at custom port. And we have a react native js which handles frontend uploads.

Root cause Analysis

Since we were getting a 'network' error and none of the other fixes helped us, we traced through the flow thgrough the network: browser -> server -> nginx -> tornado -> react -> html. We found the issue was at 'nginx'.

We had set up a standard default reverse proxy setup and never defined any file upload size limits explicitly in nginx. It turns out by default only 1 MB upload is allowed.

So within the conf.d, we explicitly set client_max_body_size in both server and the inner location and restarted nginx.

Now, nginx started allowing files upto 200MB and this reached tornado and the js. It worked :)

Solution

server { listen 443 ssl http2; client_max_body_size 200M; ssl_certificate xxx; ssl_certificate_key xxx; server_name abc.com www.abc.com; location / { proxy_pass http://0.0.0.0:866/; client_max_body_size 200M; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_redirect off; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } } 

I was having this problem too. My problem was solved when I sent an object instead of FormData. My Expo application was working smoothly on iOS and the Web, but I was getting [AxiosError: Network Error] error on Android.