Source:  Twitter logo

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:

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.

62 users liked answer #0dislike answer #062
Ahmed Haque profile pic
Ahmed Haque

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

0 users liked answer #1dislike answer #10
GustavoSevero profile pic
GustavoSevero

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.

0 users liked answer #2dislike answer #20
Allan Jiang profile pic
Allan Jiang

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).