CODEWITHSUNDEEP
androidmobileaxiosreact-native
Andrew Terex
Andrew Terex

Reputation: 361

Network Error when use axios in React Native

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);
        })

Upvotes: 18

Views: 53331

Answers (10)

Mizile
Mizile

Reputation: 162

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"
...>
<!-- ... -->

Upvotes: 0

Hisham Max
Hisham Max

Reputation: 17

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

enter image description here

Upvotes: -1

saurabh singh
saurabh singh

Reputation: 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

Upvotes: 0

skan19
skan19

Reputation: 1

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.

Upvotes: 0

Muhammad Haidar
Muhammad Haidar

Reputation: 2037

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'

Upvotes: 6

Bhagya Rathnayake
Bhagya Rathnayake

Reputation: 11

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

Upvotes: 1

Erkan G&#214;RG&#220;L&#220;
Erkan G&#214;RG&#220;L&#220;

Reputation: 259

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.

Upvotes: 1

CodeFinity
CodeFinity

Reputation: 1350

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

Upvotes: 8

Avinash
Avinash

Reputation: 1128

try adding bellow code in AndroidManifest.xml

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

Upvotes: 9

Gaurav Roy
Gaurav Roy

Reputation: 12235

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"

Upvotes: 13

Related Questions