Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
sachin1 opened this issue Jan 9, 2016 · 26 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@sachin1
Copy link

sachin1 commented Jan 9, 2016

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
Copy link
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
Copy link
Author

sachin1 commented Jan 9, 2016

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
Copy link

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
Copy link

devux commented May 3, 2016

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

@PierBover
Copy link

Where do I have to change the IP?

@Joralf
Copy link

Joralf commented Jul 15, 2016

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
Copy link

Clcll commented Oct 25, 2016

@Joralf Hi, what about Android ?

@wasa4587
Copy link

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

@qlerebours
Copy link

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
Copy link

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

@GeekRishabh
Copy link

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
Copy link

ollyde commented Apr 28, 2017

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
Copy link

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

@ollyde
Copy link

ollyde commented May 1, 2017

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
Copy link

@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
Copy link

trinhvanhuy commented May 12, 2017

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

@qlerebours
Copy link

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

@Surendharopus
Copy link

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

@rachmadideni
Copy link

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

@masylum
Copy link

masylum commented Sep 11, 2017

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

@kevinmims
Copy link

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
Copy link

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
Copy link

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
Copy link

Pau1fitz commented Dec 9, 2017

@masylum that's the solution!

@shidaying
Copy link

@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
Copy link

      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

@facebook facebook locked as resolved and limited conversation to collaborators May 24, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 20, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests