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
– Jean Regisser, Commented Jun 28, 2016 at 13:26
Thanks for your reply. i have added screenshot to main post. also you can see it here i.sstatic.net/vvqMk.png — Ata Mohammadi
– Ata Mohammadi, Commented Jun 28, 2016 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
– Santiago Bendavid, Commented Jun 28, 2016 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
– Ata Mohammadi, Commented Jun 28, 2016 at 14:00
after 3 days, finally problem solved by downgrading the react native. — Ata Mohammadi
– Ata Mohammadi, Commented Jun 28, 2016 at 14:15

Ahmed Haque · Accepted Answer · 2016-07-06 08:28:32Z

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 6, 2016 at 8:28

Ahmed Haque

7,5946 gold badges30 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jitender Over a year ago

@Ataomega how did you fixed that problem. I am facing the same in andriod

Ben Yee Over a year ago

@Carlos did you resolve the issue on Android? I'm running into the same issue, on RN 0.35, Android API 21

Jitender Over a year ago

@BenYee: I replaced localhost with my ip address and start working fine

Vijay Sharma Over a year ago

what about android? I am facing same issue in android as well.

Manjeet Singh Over a year ago

everyone is mentioning to change ip address, but what if we using rest api from server and don't know its ip.

|

Allan Jiang · Accepted Answer · 2019-01-01 04:06:02Z

0

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.

answered Jan 1, 2019 at 4:06

Allan Jiang

11.4k30 gold badges109 silver badges168 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related