CODEWITHSUNDEEP
javascriptiosreactjsreact-nativefetch-api
Ata Mohammadi
Ata Mohammadi

Reputation: 3550

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

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:
info.plist from xcode

Upvotes: 32

Views: 39386

Answers (2)

Allan Jiang
Allan Jiang

Reputation: 11351

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:

  1. Download ngrok and run ngrok http 8081 from terminal/cmd, where you should change 8081 to your localhost service port.

  2. Ngrok will give you a https forwarding endpoint, simply use that to access your localhost server.

Upvotes: 0

Ahmed Haque
Ahmed Haque

Reputation: 7544

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.

Allow Arbitrary Loads

Upvotes: 62

Related Questions