React-Native fetch, Network request failed. Not using localhost

Question

I have an app, which I'm using fetch to authenticate user. It was working until few days ago and I haven't change anything. Just upgraded from react 0.27 to 0.28, not fetch is not working.

I have searched for almost 2 days and I have read almost all questions in Stack Overflow. Most of users trying to fetch something from localhost, and when they change it to actual IP address, they get it to work. But I'm not fetching anything from localhost, also mine code used to be working.

Here is my code:

fetch('http://somesite.com/app/connect', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'language':'en-US',
        'Authorization': 'Bearer ' + access_token,
      },
      body: JSON.stringify({
        uid: uid,
        refresh_token: refresh_token,
        token: access_token,
        device: device_id,
        device_name: device_name,
      })
    })
.then((response) => response.json())
.then((responseData) => {
    console.log(JSON.stringify(responseData.body))
})
.catch((err)=> {
  console.log('Some errors occured');
  console.log(err);
})
.done();

I tried to make some new projects, simple, just used a simple fetch example fro tutorials, it gave same error. I tried to open my website which I'm trying to connect to it, through browser in emulator, it works, but it seems through my, app cannot connect to any website/IP. It gives this error in Chrome console:

TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:28193:8)
    at XMLHttpRequest.dispatchEvent (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:14591:15)
    at XMLHttpRequest.setReadyState (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:29573:6)
    at XMLHttpRequest.__didCompleteResponse (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:29431:6)
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:29506:52
    at RCTDeviceEventEmitter.emit (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:13428:23)
    at MessageQueue.__callFunction (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:11999:23)
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:11906:8
    at guard (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:11857:1)
    at MessageQueue.callFunctionReturnFlushedQueue (http://localhost:8081/index.ios.bundle?platform=ios&dev=true&hot=true:11905:1)

Actually I have the same problem as this user here: React-native network request always fails

info.plist from xcode:

What do you have under `NSAppTransportSecurity` in your info.plist file for your app? — Jean Regisser, Jun 28 '16 at 13:26
Thanks for your reply. i have added screenshot to main post. also you can see it here http://i.stack.imgur.com/vvqMk.png — Ata Mohammadi, Jun 28 '16 at 13:37
@Ataomega Have you tried restarting your computer?? I was having this same issue and just a simple restart fixed it. — Santiago Bendavid, Jun 28 '16 at 13:40
really i dont remember how many times i have restarted my computer. after any change i did it. reseting emulator, restarting computer ... reinstalling react native and ... — Ata Mohammadi, Jun 28 '16 at 14:00
after 3 days, finally problem solved by downgrading the react native. — Ata Mohammadi, Jun 28 '16 at 14:15
what about android? I am facing same issue in android as well. — Vijay Sharma, May 19 '17 at 09:46
@Ataomega what version of RN have you downgraded to, I am facing same error on android with RN 0.49.3 — Manjeet Singh, Oct 15 '17 at 12:15
thank god I downgraded to 0.45.2, wasted my whole day seeing those change ip address solution — Manjeet Singh, Oct 15 '17 at 12:47

score 62 · Accepted Answer · answered Jul 06 '16 at 08:28

62

You should check out this link: https://github.com/facebook/react-native/issues/8118

Looks like the issue emerged in React Native 0.28. Solution is to "Allow Arbitrary Loads" in the info.plist file found in the ios>build folder that React creates.

If you open the entire ios folder in xcode, then open this info.plist file you can create a new key to Allow Arbitrary Loads and it should fix your issue.

answered Jul 06 '16 at 08:28

Ahmed Haque

7,174
6
26
33

1

@Ataomega how did you fixed that problem. I am facing the same in andriod – Jitender Oct 12 '16 at 04:33
7

@Carlos did you resolve the issue on Android? I'm running into the same issue, on RN 0.35, Android API 21 – Ben Yee Oct 28 '16 at 07:00
3

@BenYee: I replaced localhost with my ip address and start working fine – Jitender Oct 28 '16 at 07:07
3

what about android? I am facing same issue in android as well. – Vijay Sharma May 19 '17 at 09:47
everyone is mentioning to change ip address, but what if we using rest api from server and don't know its ip. – Manjeet Singh Oct 15 '17 at 12:05
Cannot use the the IP address of an https server, or the server's certificate won't work (is domain-specific). What is the fix? Is cannot be that React-Native cannot be used to connect to any remote resources, unless they can be fetched with a static-ip address in place of the domain-name - so there must be a solution. Maybe an alternative to "fetch()" ?? – JosephK Nov 02 '17 at 15:48
Any idea for android? – Akshay Seth Jul 31 '18 at 10:06
I have solved my anroid network error problem with https in react native. Please check my gist. https://gist.github.com/ecdundar/f9207775e4cf22e939f77c5307265529 – Ecd Jan 21 '19 at 18:24

score 0 · Answer 2 · answered Aug 31 '18 at 13:49

0

Set the info.plist doesn't work for me too. Trying to run on iOS.

answered Aug 31 '18 at 13:49

GustavoSevero

141
1
9

score 0 · Answer 3 · answered Jan 01 '19 at 04:06

This issue is the code is trying to fetch HTTP endpoint instead of HTTPS, which is not encouraged. If you are fetching from localhost server, an easy solution will be exposing your localhost server through a Ngrok https endpoint.

Steps:

Download ngrok and run ngrok http 8081 from terminal/cmd, where you should change 8081 to your localhost service port.
Ngrok will give you a https forwarding endpoint, simply use that to access your localhost server.

React-Native fetch, Network request failed. Not using localhost

3 Answers3

Linked