Skip to content

Fetch request throwing "Network Request Failed" error across host REST End point Android #5222

@sachin1

Description

@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

Activity

facebook-github-bot

facebook-github-bot commented on Jan 9, 2016

@facebook-github-bot
Contributor

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

sachin1 commented on Jan 9, 2016

@sachin1
Author

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

dongrenguang commented on Mar 19, 2016

@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

devux commented on May 3, 2016

@devux

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

PierBover

PierBover commented on Jul 8, 2016

@PierBover

Where do I have to change the IP?

Joralf

Joralf commented on Jul 15, 2016

@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:
#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

Clcll commented on Oct 25, 2016

@Clcll

@Joralf Hi, what about Android ?

wasa4587

wasa4587 commented on Oct 25, 2016

@wasa4587

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

qlerebours

qlerebours commented on Nov 10, 2016

@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

qlerebours commented on Nov 10, 2016

@qlerebours

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

geekrishabh

geekrishabh commented on Dec 23, 2016

@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 .

ollyde

ollyde commented on Apr 28, 2017

@ollyde

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.

1 remaining item

ollyde

ollyde commented on May 1, 2017

@ollyde

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

geekrishabh commented on May 2, 2017

@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

trinhvanhuy commented on May 12, 2017

@trinhvanhuy

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

qlerebours

qlerebours commented on May 14, 2017

@qlerebours

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

Surendharopus

Surendharopus commented on Jul 4, 2017

@Surendharopus

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

rachmadideni

rachmadideni commented on Aug 5, 2017

@rachmadideni

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

masylum

masylum commented on Sep 11, 2017

@masylum

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

kevinmims

kevinmims commented on Sep 14, 2017

@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

kevinmims commented on Sep 14, 2017

@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

Aloyalty commented on Oct 14, 2017

@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

Pau1fitz commented on Dec 9, 2017

@Pau1fitz

@masylum that's the solution!

shidaying

shidaying commented on Feb 27, 2018

@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

savinash47 commented on May 21, 2018

@savinash47
      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

locked as resolved and limited conversation to collaborators on May 24, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @masylum@PierBover@sachin1@trinhvanhuy@wasa4587

        Issue actions

          Fetch request throwing "Network Request Failed" error across host REST End point Android · Issue #5222 · facebook/react-native