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
– Kishan Bharda, Commented Jan 6, 2020 at 4:54
Not helpful. I downgraded axios but still same error. I think this maybe sth like cache problem. — Andrew Terex
– Andrew Terex, Commented Jan 6, 2020 at 13:58

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

15

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 5, 2020 at 16:15

Gaurav Roy

12.4k3 gold badges30 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andrew Terex Over a year ago

I already added it to 'AndroidManifest.xml' in the application tag.

Gaurav Roy Over a year ago

after adding it to AndroidManifest did you do android:bundle and then build a new apk and tried with that?

Andrew Terex Over a year ago

I'm testing on development server with my android phone.

William Bridge Over a year ago

what will be the impact of adding this option in versions prior to android 9 ?

Avinash · Accepted Answer · 2020-10-04 13:13:43Z

9

try adding bellow code in AndroidManifest.xml

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

answered Oct 4, 2020 at 13:13

Avinash

1,1483 gold badges15 silver badges28 bronze badges

Comments

CodeFinity · Accepted Answer · 2021-06-16 20:55:13Z

8

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

answered Jun 16, 2021 at 20:55

CodeFinity

1,3502 gold badges22 silver badges28 bronze badges

Comments

Muhammad Haidar · Accepted Answer · 2022-08-05 22:39:34Z

6

Was facing the same issue & solved it by doing:

1- Find the IP Address of your machine.

2- Replace your localhost address with your IP address**

 replace ==>  'http://localhost:8000/api/download'

 with ==> 'http://192.120.16.108:8000/api/download'

answered Aug 5, 2022 at 22:39

Muhammad Haidar

2,0971 gold badge24 silver badges22 bronze badges

Comments

Erkan GÖRGÜLÜ · Accepted Answer · 2022-06-01 08:59:12Z

1

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.

answered Jun 1, 2022 at 8:59

Erkan GÖRGÜLÜ

2582 silver badges7 bronze badges

Comments

Bhagya Rathnayake · Accepted Answer · 2022-07-10 07:53:19Z

1

My problem was that I was using the host url as http://127.0.0.1 while running my app on an emulator.

With emulators, the use of "localhost" OR "127.0.0.1" does not apply since emulator tries only within its scope.

If you are running your app in a local env, make sure that both your device and the server are in the same network and use the IP address of the server as the host url.

In my case it was http://192.168.8.101:8080

answered Jul 10, 2022 at 7:53

Bhagya Rathnayake

113 bronze badges

Comments

saurabh singh · Accepted Answer · 2023-07-15 00:04:15Z

1

facing same issue & solved it by doing:

1- Make sure your PC and android device(if external) are connected to the same wifi network 2- Find the IP Address of your machine|| setting=>wifi=>select the wifi you are connected to => copy the IPV4 address and use it instead of localhost. 3- Replace your localhost address with your IP address**

replace ==> 'http://localhost:8000/register

with ==> 'http://192.120.16.108:8000/register

answered Jul 15, 2023 at 0:04

saurabh singh

111 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

skan19 · Accepted Answer · 2022-11-12 14:10:47Z

0

I face the same issue. I resolve it by making some changes in my backend project with ASP.NET core 6. I had two urls for lunching app in backend: "applicationUrl": "https://localhost:7218,http://localhost:5218" and i changed it to "applicationUrl":"http://localhost:5218". In my react native app i maked backend host to http://10.0.2.2:5218 and it was working for me.

edited Nov 12, 2022 at 14:10

answered Nov 8, 2022 at 12:03

skan19

11 bronze badge

1 Comment

Mike Maazallahi Over a year ago

Hi, consider using the tilda sign ( ` ) to wrap around the code parts within your text so that it's more readable.

Mizile · Accepted Answer · 2024-10-07 11:37:40Z

0

If you're targeting API level 28 or above, and using HTTP (not HTTPS), you may need to add a network security configuration.

Create a file at android/app/src/main/res/xml/network_security_config.xml with the following content:

`<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true" />
</network-security-config>`

Then reference it in AndroidManifest.xml:

<application
android:networkSecurityConfig="@xml/network_security_config"
...>
<!-- ... -->

answered Oct 7, 2024 at 11:37

Mizile

1621 silver badge10 bronze badges

Comments

Hisham Max · Accepted Answer · 2024-08-19 15:03:44Z

-1

I faced this same problem when I used a localhost but I was able to solve this problem when I used Expo ip http://192.168.1.8:8000

answered Aug 19, 2024 at 15:03

Hisham Max

173 bronze badges

Collectives™ on Stack Overflow

Network Error when use axios in React Native

10 Answers 10

4 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

4 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Linked

Related