React-native: Fetch request throwing "Network Request Failed" error across host REST End point Android

[sachin1]

Hi,

I have written react native app which is working fine for IOS but while testing on google android simulator, it throws an error: "Network Request Failed".
Url address: http://192.x.x.x:8000/api/data.
Both Emulator and REST Server are running on different host, so communication is across host.
REST communication across host working fine for ios.
I have checked network connectivity in emulator and able to surf internet from browser.
Please provide any inputs to fix this

[facebook-github-bot]

Hey sachin1, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[sachin1]

Hi Team,

Issue has been resolved on android. It was problem with body and headers of get/post request in fetch call. For ios, it was working and no changes required.
For get call, Explicitly pass: Null in body.
For Post call, headers must be different:
For the benefit of others, please find code snippet below: I have written generic function for post,put & get request.
fetch_auth(
var body = null; //earlier i used var body =' '; //blank value --null & blank makes a different
if (method === 'post' || method === 'POST' ||
method === 'put' || method === 'PUT') {
body = serializedData;
headers = {
'Accept': 'application/json',
'Authorization': 'Bearer ' + this.authToken,
'Content-Type': 'application/x-www-form-urlencoded',
};
} else {
url = url + '?' + serializedData;
headers = {
'Accept': 'application/json',
'Authorization': 'Bearer ' + this.authToken,
};
}
return fetch(
url,
{
method: method,
headers: headers,
body: body,
}
}

[dongrenguang]

I also get the same error, when I run another local server(based on JavaEE) to provide data. Finally, I replace the "localhost"(or "127.0.0.1") with my IP address, such as "192.168.56.1". It is resolved.

[devux]

yes after changing localhost to IP Adress of system the problem got solved @dongrenguang

[PierBover]

Where do I have to change the IP?

[Joralf]

I have this exact issue, even when using the examples from: https://facebook.github.io/react-native/docs/network.html

There is no localhost involved in my request addresses, so how would changing the IP help and where do I change it?

Never mind, it's answered: Thanks to PierBover's profile I found this post:
https://github.com/facebook/react-native/issues/8717

So iOS doesn't support http requests out of the box, only https. See: https://facebook.github.io/react-native/docs/running-on-device-ios.html#app-transport-security

[Clcll]

@Joralf Hi, what about Android ?

[wasa4587]

@Clcll it's the same for android, add the ip instead localhost

[qlerebours]

I have the same issue:
fetch('http://192.168.0.15:8082/user/create', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ firstname: this.state.firstname, lastname: this.state.lastname, phoneNumber: this.state.phoneNumber }) } )
Error: TypeError: Network request failed

I tried the POST request from postman (a tool to send post request) and it worked...
I read two solution:

• info.plist (not working, i work with an android device)
• Use local address instead of localhost (done)

Does someone have an idea ?

[qlerebours]

I found my mistake ...
My device was working with 4G, not with wifi, so 192.168.0.15 was an unknown host.

[GeekRishabh]

Using it with feathersjs

we can use either fetch() i.e from react native networking or we can use app.service() of feathersjs
I will recommend you to use app.service() for app to be real time .and also you can get response as per your need from backend only (using hooks) .

Code for both way is written down:

1> Using Fetch() -React Native

fetch('http://192.168.1.xxx:3030/sms').then((response) => console.log(response));
response will be printed in browser if remote debugging is ON.

2> using App.service() - Feathersjs

app.service('sms').find({}).then(function(response){
console.log(response);
})
.catch(function(){
console.log("No");}
)

you need to use these two lines too

const host = 'http://192.168.1.xxx:3030';
let socket = io(host, { transports: ['websocket'] });

Its working fine with IOS and Android in my case .

I have used url ie IP Address of other system where feathersjs server is running .

[ollydixon]

I'm not running against local host (using a real API) and I'm still getting this error. Cannot change to IP because the API is dynamic.

[GeekRishabh]

@voidstarfire enter the server url along with port it is running on .

[ollydixon]

Due to the nature of the environments that are setup we don't know the server ports. We get the address only as it's a distributed hub (millions of users).

[GeekRishabh]

@voidstarfire if you don't know the port then you can try for default port depending on the backend server language.(node > 3030/3000 ) .you can google this out .

[trinhvanhuy]

Hello, I got exacte same issue today, does anyone have a solution ?

[qlerebours]

@trinhvanhuy are you sure your mobile is connected to the same network that your phone ?

[Surendharopus]

Hi, pls give some example for JSON parsing(POST) in React Native Android

[rachmadideni]

your post save me @qlerebours. actually forgot connecting android to the same network

[masylum]

I had the same issue and I used localtunnel to work around it https://localtunnel.github.io/www/

[kevinmims]

I am having the same issues with POST on android devices using react native 'fetch'.

GET requests work fine (ios and android) but POST returns 'Network request failed'. My url is 'https://PREFIX.URL.com', which is public, not localhost. The ip address is dynamically assigned by a load-balancer (but I have tried with the current ip address and port as mentioned above and it still fails).

I am at a loss trying to find the solution, any new ideas??

[kevinmims]

Wanted to update in case my problem can help others. My error was specific to Android and more specifically, the intermediate certificate on the server.

During the OAuth process in our app, we use a WebView for the user to authenticate. After login, we request a valid token. The android browser is stricter (or not as efficient at finding cert chains) than ios (and chrome for that matter) and was not allowing the POST request to be sent to the server. After installing the intermediate cert correctly, all is well.

Here is a convenient site to check your cert (enter your site at the top): https://www.digicert.com/help/

Hope this helps someone else!

[Aloyalty]

i try to get tinder profile using tinder api doc but i can not access this because i got this error {"status":401,"error":""}

[Pau1fitz]

@masylum that's the solution!

[shidaying]

@dongrenguang how to change the ip, my project rn version is 0.51, https request is always failed, 'TypeError: network request failed'. how to resovle the problem , anyone help me ?

[savinash47]

fetch('https://mylocalip:5000/api/token').then(function (response) { console.log('response : ',response) return response.json(); }).then (function (response) { console.log('token : ',response.token); this.setState({ token: response.token }); }).catch(function (error) { console.log(error); });
Above is my code but i still run into the issue while calling a api running on local server