react-native: [TypeError: Network request failed] using fetch, iOS only issue

Description

I cant reach my API on iOS emulator. The same code runs perfectly on the Android emulator. I tried a couple of other APIs just to test and everything works as intended (JSONPlaceholder with HTTPS and some random one that uses HTTP. Both GET and POST work fine).

React Native version:

System: OS: macOS Mojave 10.14.6 CPU: (4) x64 Intel® Core™ i5-5257U CPU @ 2.70GHz Memory: 31.91 MB / 8.00 GB Shell: 5.3 - /bin/zsh Binaries: Node: 14.6.0 - ~/.nvm/versions/node/v14.6.0/bin/node Yarn: 1.22.5 - /usr/local/bin/yarn npm: 6.14.6 - ~/.nvm/versions/node/v14.6.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.9.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 Android SDK: API Levels: 28, 29, 30 Build Tools: 28.0.3, 29.0.2, 30.0.2 System Images: android-29 | Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 4.0 AI-193.6911.18.40.6626763 Xcode: 11.3.1/11C505 - /usr/bin/xcodebuild Languages: Java: 1.8.0_265 - /usr/bin/javac Python: 2.7.16 - /usr/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: 0.63.2 => 0.63.2 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Expected Results

I would expect the same request to go through on both platforms as per usual.

Code example and error screenshot:

const login = async (authData) => {
  console.log('fetching...');
  //Setting up the request
  //Select apropriate port 8515 | 8516
  const port = handlePortSelection(authData.username);
  const url = `http:\\xxx.xxx.xxx.xxx:${port}/api/Auth/LoginUser`;

  const headers = {'Content-Type': 'application/json; charset=UTF-8'};

  const body = JSON.stringify(authData);

  const requestOptions = {
    method: 'POST',
    headers: headers,
    body: body
  };

  try {
    //Call API
    const response = await fetch(url, requestOptions);

    const data = await response.json();

    setUserData(data);
  } catch (error) {
    console.error(error);
  }
};

Simulator Screen Shot - iPhone 11 - 2020-09-09 at 12 13 21

My Info.plist file:

    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 1
  • Comments: 16

Most upvoted comments

Hi @nikolai369 and @vajid-khan I have the same issue on IOS 14 only. On IOS 13 it works fine. Did you solve it?

My error looks like this

TypeError: Network request failed
    at fetch.umd.js:527
    at JSTimers.js:235
    at _callTimer (JSTimers.js:130)
    at Object.callTimers (JSTimers.js:383)
    at MessageQueue.__callFunction (MessageQueue.js:416)
    at MessageQueue.js:109
    at MessageQueue.__guard (MessageQueue.js:364)
    at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:108)
    at RNDebuggerWorker.js:2

@vajid-khan

I am facing similar issue on ios. My api calls fails randomly, same api call works one time, other time fails.

Unfortunatley, my call never goes through on iOS, but always works on Android. Still having the same issue…

@computerjazz Thanks a lot man ❤️. I have been spinning around trying to figure out why this happens for over 10 hours. This should be added to the docs.

This issue occurred when we would POST in response to a deeplink in a Linking.addEventListener("url") callback. It turned out the callback was firing before the app entered the “foreground” (checked via AppState), and apparently POST fails when the app is backgrounded (verified by setting a timeout on another POST and backgrounding the app before it fired – same failure).

Our solution was to wait for the app to fully re-enter the foreground before triggering any POST requests.

I am facing similar issue on ios. My api calls fails randomly, same api call works one time, other time fails. Using axios 0.19.2 tried fetch api but same result Rn version 0.62.2. On android its working fine.