Network Error when use axios in React Native

Question

This is long-standing problem for me and I can't find solution at all.

Within my react native project(react-native-cli), I send request to server using axios package. But when I'm testing with my android phone, it gives [Error: Network Error]. With emulator, it's okay.

I'm sure this is not back-end problem because I've tested with several servers. And I also used fetch instead but got same error.

Here is version information.

"axios": "^0.19.0",
"react": "16.9.0",
"react-native": "0.61.5",

Sometimes, it's working on android phone too. This problem is biggest mystery and I suffered for a long time.

Somebody who experienced this issue, please alive me. Thank you for careful reading.

Sometimes, it's not working even with android emulator. But after deleted original emulator and created new emulator, it's working.

const serverUrl = "https://server.com";
axios.post(serverUrl + "/api/candidates/login", {
            "email": this.state.email ,
            "password": this.state.password
        }, {
            headers: {
                'Content-Type': 'application/json'
            }
        }).then((response) => {
                console.log(response.data);
        }).catch((error) => {
                console.log(error);
        })

This error is with `"axios": "^0.19.0"`. If you downgrade your axios version for ex : `"axios": "^0.18.0"` then run `npm install` and then if you run your app it will run successfuly. — Kishan Bharda, Jan 06 '20 at 04:54
Not helpful. I downgraded axios but still same error. I think this maybe sth like cache problem. — Andrew Terex, Jan 06 '20 at 13:58
I found this https://github.com/facebook/react-native/issues/24039 — HuLu ViCa, Sep 10 '20 at 17:09
@AndrewTerex did you find a solution ? I'm also having same problem. My URL is https not http, still it is not working on iOS simulator. What I can observe is if I try opening the same URL safari inside the simulator, the URL is shown as private, — Vasanth, Dec 18 '20 at 13:07
This resolved my issue. Please try : https://stackoverflow.com/a/64161651/8013132 — ABM, Apr 06 '21 at 12:08

score 7 · Answer 1 · answered Jan 05 '20 at 16:15

7

I think this is a problem with http and https request. SO to enable https request try the one below :

The easy way to implement this is to use this attribute to your AndroidManifest.xml where you allow all http for all requests:

android:usesCleartextTraffic="true"

answered Jan 05 '20 at 16:15

Gaurav Roy

8,042
3
17
38

2

I already added it to 'AndroidManifest.xml' in the application tag. – Andrew Terex Jan 05 '20 at 18:27
after adding it to AndroidManifest did you do android:bundle and then build a new apk and tried with that? – Gaurav Roy Jan 06 '20 at 03:25
I'm testing on development server with my android phone. – Andrew Terex Jan 06 '20 at 13:59
what will be the impact of adding this option in versions prior to android 9 ? – William Bridge Sep 16 '20 at 03:32

score 5 · Answer 2 · answered Oct 04 '20 at 13:13

5

try adding bellow code in AndroidManifest.xml

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

answered Oct 04 '20 at 13:13

Avinash

561
1
7
20

score 3 · Answer 3 · answered Jun 16 '21 at 20:55

3

For Android, instead of using: localhost, use 10.0.2.2.

answered Jun 16 '21 at 20:55

CodeFinity

898
2
15
17

score 0 · Answer 4 · answered Jun 01 '22 at 08:59

I have tried adding access network state permission and usesCleartextTraffic and both of the solutions didn't help. I am still getting this error.Out of all my endpoints (30+), I am only getting this error while sending a post request to logout with a refresh token as parameter. The rest of the api is working fine.

I have found the problem. The endpoint returns 205 and this creates an error returning Network Error instead of success. I am thinking to tell my backend to change the response status code to 200.

Network Error when use axios in React Native

4 Answers4

Linked