Network error with axios and react native

Question

I have created an API endpoint using the Django python framework that I host externally. I can access my endpoint from a browser (mydomain.com/endpoint/) and verify that there is no error. The same is true when I run my test django server on locally on my development machine (localhost:8000/endpoint/). When I use my localhost as an endpoint, my json data comes through without issue. When I use my production domain, axios gets caught up with a network error, and there is not much context that it gives... from the debug console I get this:

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)
    at XMLHttpRequest.dispatchEvent (event-target.js:172)
    at XMLHttpRequest.setReadyState (XMLHttpRequest.js:554)
    at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:387)
    at XMLHttpRequest.js:493
    at RCTDeviceEventEmitter.emit (EventEmitter.js:181)
    at MessageQueue.__callFunction (MessageQueue.js:353)
    at MessageQueue.js:118
    at MessageQueue.__guardSafe (MessageQueue.js:316)

This is my axios call in my react native component:

    componentDidMount() {
        axios.get('mydomain.com/get/').then(response => {  // localhost:8000/get works
            this.setState({foo:response.data});
        }).catch(error => {
            console.log(error);
        });
    }

You probably want to have some sort of logger to see the request and response to make sure what the actual network error is — Sean Wang, Mar 19 '18 at 20:10
@SeanWang Is there something you were thinking of? I'm not sure what you mean. — smilebomb, Mar 20 '18 at 01:06
Possible duplicate of [Axios (in React-native) not calling server in localhost](https://stackoverflow.com/questions/42189301/axios-in-react-native-not-calling-server-in-localhost) — Rex Low, Mar 20 '18 at 01:28
Possible duplicate of [React Native fetch() Network Request Failed](https://stackoverflow.com/questions/38418998/react-native-fetch-network-request-failed) — Michael Cheng, Mar 20 '18 at 01:35
The solution to these error can vary and the error message is not very helpful. For those that might still run into the same problem, if you want to get helpful error messages that will help you debug, use `console.log(error.response)`. I spent a whole day before I saw this in [axios documentation](https://axios-http.com/docs/handling_errors) — SirG, Mar 15 '22 at 22:18

score 39 · Answer 1 · answered Jan 04 '20 at 07:05

39

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.

answered Jan 04 '20 at 07:05

Esteban Vega

491
5
3

2

Works! For example "http:// localhost:8000/" becomes "http:// 10.0.2.2:8000/" – AdamJSim Feb 14 '22 at 16:42

score 34 · Accepted Answer · answered Mar 20 '18 at 01:25

34

It seems that unencrypted network requests are blocked by default in iOS, i.e. https will work, http will not.

From the docs:

By default, iOS will block any request that's not encrypted using SSL. If you need to fetch from a cleartext URL (one that begins with http) you will first need to add an App Transport Security exception.

answered Mar 20 '18 at 01:25

smilebomb

4,641
8
41
76

1

This was a life saver! – H.Epstein Jan 24 '20 at 08:02
Yes perfect answer! – Pankaj Sonava Oct 12 '20 at 09:50
Also, if you're connecting to a remote host, make sure that your SSL intermediate certificates are correctly established. Use https://www.digicert.com/help/ to check them. – Mostafa Farzán Nov 21 '20 at 22:34
I have https but it's doesn't work yet do you know another way for this ? – MEAbid Jun 08 '21 at 12:39

score 18 · Answer 3 · answered Jan 31 '20 at 20:20

18

change from localhost to your ip(192.168.43.49)
add http://

http://192.168.43.49:3000/user/

answered Jan 31 '20 at 20:20

kamalesh biswas

751
6
8

score 12 · Answer 4 · answered Feb 14 '21 at 12:04

12

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

answered Feb 14 '21 at 12:04

illusionist

9,926
2
59
77

1

http://localhost:3000 it's doesn't work for IOS and then I changed the http to https it's still doesn't work – MEAbid Jun 08 '21 at 12:41
@MEAbid make sure ip and port is correct. Also, check firewall settings. – illusionist Jun 09 '21 at 01:31

score 2 · Answer 5 · answered Mar 14 '20 at 14:29

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;

score 2 · Answer 6 · answered Jul 09 '20 at 07:05

2

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

answered Jul 09 '20 at 07:05

bhaRATh

489
2
19

score 1 · Answer 7 · answered Jan 01 '20 at 21:14

1

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

answered Jan 01 '20 at 21:14

Muhammad Ashfaq

1,835
2
15
39

Shezada lagaya tu – Zaid Qureshi May 28 '21 at 06:46

enestatli · Answer 8 · 2021-02-02T18:49:02.950

1

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" />

edited Feb 02 '21 at 18:49

answered Feb 02 '21 at 18:43

enestatli

339
1
9
16

Supuna Warusawithana · Answer 9 · 2022-05-26T14:56:11.590

0

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.

edited May 26 '22 at 14:56

answered Feb 09 '22 at 05:34

Supuna Warusawithana

546
4
12

Network error with axios and react native

9 Answers9

Conclusion

Linked