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
Not helpful. I downgraded axios but still same error. I think this maybe sth like cache problem. — Andrew Terex

Gaurav Roy Gaurav Roy · Accepted Answer · 2020-01-05T16:15:51

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"

Network Error when use axios in React Native

3 Answers