React-Native fetch, Network request failed. On android

[Clcll]

Hello, everything working fine on IOS but it's faild on Android

fetch('http://somesite.com/app/connect', { ........

Thank you before hand

[dunhuang]

@Clcll please show the options of your fetch

[woniesong92]

My requests using axios are also failing:

axios.get(`http://localhost:5000/posts`)
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

And I get the following exception on browser:

Error: Network Error
    at createError (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:84821:11)
    at XMLHttpRequest.handleError (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:84693:8)
    at XMLHttpRequest.dispatchEvent (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:15132:15)
    at XMLHttpRequest.setReadyState (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:30776:6)
    at XMLHttpRequest.__didCompleteResponse (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:30622:6)
    at http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:30716:52
    at RCTDeviceEventEmitter.emit (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:14371:23)
    at MessageQueue.__callFunction (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:12115:34)
    at http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:11986:8
    at guard (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:11926:1)

fetch API returns the same error:

Code:

export const fetchPosts = () => {  
  return (dispatch, getState) => {
    return fetch(`${API_URL}/posts/all`)
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson)
      })
      .catch((error) => {
        console.error(error);
      });
  }
}

Error:

Packages:

  "dependencies": {
    "axios": "^0.15.0",
    "classnames": "^2.2.5",
    "react": "15.3.2",
    "react-native": "0.35.0",
    "react-redux": "^4.4.5",
    "redux": "^3.6.0",
    "redux-thunk": "^2.1.0"
  },
  "jest": {
    "preset": "jest-react-native"
  },
  "devDependencies": {
    "babel-jest": "16.0.0",
    "babel-preset-react-native": "1.9.0",
    "jest": "16.0.1",
    "jest-react-native": "16.0.0",
    "react-test-renderer": "15.3.2"
  }

EDIT:
Solution for me was instead of using localhost:port for the API address, actually using an IP address of the server.

[dunhuang]

@woniesong92 did you set Allow Arbitrary Loads = YES in info.plist?

[sudhirvkumar]

@dunhuang info.plist is for iOS, how is that going to have any effect in Android? I am confused. @Clcll has mentioned that it works in iOS and it doesn't work in Android...

[dunhuang]

@sudhirvkumar I was thinking @woniesong92 's issue is running in IOS and now I think I might be wrong.
As for @Clcll I think some of his fetch option may not be supported in Android.

[rcabral90]

Running into the same issue with Android using axios & fetch.
I am resorting to using a Native Module for Android as a temporary solution.

[lacker]

Hey, I think we really don't have enough information here to debug this problem. Stack Overflow might be better for this, that way someone else can help edit the question. I'm going to close this issue, I'd try Stack Overflow if I were you.

[rcabral90]

Actually I fixed my problem, I just used the IP address Port of my server that host my API.
There is an issue with the security certificate of my server the android.

[EllisShen]

Guys, I encountered this issue as well. What I know so far is that Fetch API works on newer Android devices whose is Android 5 or above. The issue now seems happened on an older device including Android 4.1, 4.2 and 4.4 and issues seems happened on RN 0.30 and newer.

[tuxtux00]

Hi guys,

I also get this issue randomly with the app installed on my iOS device.
I have allowed Arbitrary Loads in my info.plist file.

As this thread has been closed, is there a topic where we can find help ?

[divyekhanna]

@rcabral90 Could you detail your solution a bit? I'm using IP Address and port for the server that hosts my API, but it gives me the Network Error about once in 5-7 requests

EDIT: I'm using http, not https

[minhcasi]

I had the same issue on iOS, it is okie for first 4-5 requests but the error occur then, please suggest !

[StephanPartzsch]

The thing is, that iOS is running in a simulator and Android is running in an emulator.
The localhost is pointing to the environment in which the code is running. The emulator emulates a real device while the simulator is only imitating the device.
Therefore the localhost on Android is pointing to the emulated Android device. And not to the machine on which your server is running.
The solution is to replace localhost with the IP address of your machine.

[MHaendel]

Same problem with a public facing webhost. Network request failed. On Android btw.

Edit: It seems different times between server and host caused this.

[athmangude]

Also running on this issue now with devices running on Android version 4.. using React Native version 0.40.0

[ghost]

I am facing same problem on react native android emulator. Is there a fix or solution. Please reply.

[ghost]

How to replace localhost with IP address of my machine.

[yoohan-dex]

I am also facing that

[rderwin]

Use 10.0.2.2 for default AVD and 10.0.3.2 for Genymotion
http://stackoverflow.com/questions/5528850/how-to-connect-localhost-in-android-emulator

[bexoss]

+1 how can I fix it?
Even I changed axios.get('localhost:3000/hello') to axios.get('127.0.0.1:3000/hello'), the problem still left.

Edit

@rderwin way I fix it. Thanks

[montrealks]

I replaced fetch('http://localhost:3000/api/meetups') with the IP adress of my computer and it worked

[achakra21]

use your ip address in place of localhost,It should work

[sukeshthakare]

@achakra21 @montrealks still it not working

[danish-rehman]

I was also facing the issue and i replaced the localhost with my ip address and it worked.

[haris-ramzan]

How to solve this error, This error occur when network connection is lost,

[psahni]

@StephanPartzsch - You solved my problem. Thanks a lot.
For others - Please put the IP address of the target server into your request.
localhost is conflicting with localhost of android emulator.

All credit goes to StephanPartzsch. Respect for you.

[syamjayaraj]

@StephanPartzsch I just replaced localhost with my ip address. It is working fine.
But the thing is, the ip address is changing in every restart or changing WiFi connection.

[pravinraut809]

Nothing is working for me...

[monolithed]

The same problem on Android with image

[aprilmintacpineda]

@monolithed I think that error is telling you exactly what's wrong. You are giving an object as a child of an element, that's not going to work. People will be able to help you more if you show us the code that could be the most relevant and related to that error.

[monolithed]

@aprilmintacpineda, nope.

let body = new FormData();

body.append('image', {
	uri: image,
	name: 'image',
	type: 'image/jpeg', // This is important for Android!!
});

await fetch(url, { body });

[aprilmintacpineda]

@monolithed Did you managed to solve it yet? where is that code located in the cycle of your software?

[monolithed]

@aprilmintacpineda, the problem has already been solved. That exception has occurred due to I forgot to pass the type field (required on Android)

[vanmart]

how woniesong92 says... Solution for me was instead of using localhost:port for the API address, actually using an IP address of the server.

[AmirTahani]

@vibhor-pandey i had the same problem and i fixed it by chaning server ssl to a paid ssl ,
we were using lets encrypt on server and when i checked ssl on this website https://www.ssllabs.com/ssltest/analyze.html we got grade B for some security reasons!

by the way I changed ssl and now we have grade A+ and it fixed my problem;
hope this helps someone

[vibhor-pandey]

@AmirTahani some updates (including SSL) solved my problem 😄

[DhruvTekchandani]

I dont know how far this approach is good, but for me if I go to
Tools -> AVD Manager -> Choose my device and wipe the data.

Then re-run the reac-native run-android, it seems to fetch the results perfectly without any network errors.
But it doesnt make sense why this approach works.

[alexustinovsm]

@monolithed tnx mate! You have saved my day!

[dev-amirmufid]

in Android i have a problem same too.
please help i have deadline project in my office.

let url = "https://www.domain.com"; // real domain not localhost
let body = null;

let headers = {
  'Content-Type': 'application/json',
  'key':'xxxxxxxx',
};

fetch(url, {
  method: "GET",
  headers: headers,
  body: null
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.log(error));

`

Package.json

{ "react": "16.0.0", "react-native": "0.50.0", }

Error:

TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (C:\HDS\Android\react native\reactNative\mt\node_modules\react-native\node_modules\whatwg-fetch\fetch.js:441)
at XMLHttpRequest.dispatchEvent (C:\HDS\Android\react native\reactNative\mt\node_modules\event-target-shim\lib\event-target.js:172)
at XMLHttpRequest.setReadyState (C:\HDS\Android\react native\reactNative\mt\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:554)
at XMLHttpRequest.__didCompleteResponse (C:\HDS\Android\react native\reactNative\mt\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:387)
at C:\HDS\Android\react native\reactNative\mt\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:493
at RCTDeviceEventEmitter.emit (C:\HDS\Android\react native\reactNative\mt\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:181)
at MessageQueue.__callFunction (C:\HDS\Android\react native\reactNative\mt\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:302)
at C:\HDS\Android\react native\reactNative\mt\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:116
at MessageQueue.__guard (C:\HDS\Android\react native\reactNative\mt\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:265)
at MessageQueue.callFunctionReturnFlushedQueue (C:\HDS\Android\react native\reactNative\mt\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:115)

[vibhor-pandey]

@akiramouto there is no any exact statement about this error.

1. Uninstall the App(first clear all the Cached Data of the App from mobile)

2. If 1st Solution doesn't work out, then change the SSL

3. The last solution is to some package version conflicts

[willwish]

Please check if you can access google.com in the simulator.
If not, just remove the simulator and install again

[g13ydson]

Sounds like a problem with certificate. https://stackoverflow.com/questions/48198757/cant-fetch-api-resource

I tested some sites with this tool https://www.digicert.com/help/ And the websites that have the error: SSL Certificate is not trusted, are the ones that cause the error, TypeError: Network request failed

[goldengecko]

In my case I had to specify the dns-server when starting up, which allowed me internet access.

The following on Mac:

cd ~/Library/Android/sdk/tools
emulator -list-avds

Will give you a list of emulators, then you will need to start one up with the DNS specified, e.g.

emulator -avd Nexus_7_2012_API_27 -dns-server 10.1.1.1

Also, in my config I was referring to a hostname that was configured in my /etc/hosts which seems to work for iOS emulator, but I have to go with the ip address on the android one.

[arash-hacker]

# this worked for me
i have https and http on my server
my IP and port constant is rejecting request for security reason
and i can't use constant IP in my URL react native because it change periodicly
i started with
https://185.85.*:8080/api .. > it closed by sysadmin
http://185.85.*/api .. > it closed by sysadmin
http://mysite.com/api .. http manual
https://mysite.com/api .. https manul
and so on ...
and i suddenly tested with
https://www.mysite.com/api .. and it worked 😂😂😂😂
dont forget to test with WWW

[DylanVann]

For iOS you'd still need to change it the actual local ip.

In development mode for iOS React Native gets started on the device with reloading working through the local ip, so the app already has it. Maybe we could get access to it somehow in JS so we can avoid having to do it manually.

[aprilmintacpineda]

I'm using iOS simulator from XCode, Android emulator from Android Studio.

on Android it's 10.0.0.2, so you can do: http(s)//10.0.0.2:9000/put/other/url/here.
on iOS it's localhost, so you can do http(s)//localhost:9000/put/other/url/here.

[Wowgreat]

@Clcll
I found the reason for this error.
when i fetch "https://xxxxx",I get this error.But when i fetch "http://xxxx",this error gone.So I guess that by default android do not support HTTPS.
I hope someone could tell me how to fix it.

[aprilmintacpineda]

@Wowgreat there are multiple reasons as to why HTTPS would fail, it could be with certificates. I've tested Android and iOS on HTTPS and both worked well, in fact, iOS does not allow HTTP instead it will force you to use HTTPS.

[Wowgreat]

@aprilmintacpineda
Thank you telling me those, I am new one in react-native.It is worth mentioning that few days ago I get the same error on iOS.Finally I fixed by read NativeScript/NativeScript#1881 and summarize then write in here https://www.codemanclub.cn/index.php/article/getArticleById/100.
Hope those is useful for you.

[saidziani]

I'm working with React native and Flask REST API, i had the same issue.
And i fixed it by adding:

host= '0.0.0.0'

Example:
if __name__ == '__main__':
    app.run(debug=True, host= '0.0.0.0')

Thanks to @jhadjar

[aditi2608]

Just replace the link's https with http