241

When I create a brand new project using react-native init (RN version 0.29.1) and put a fetch in the render method to the public facebook demo movie API, it throws a Network Request Failed. There is a very useless stack trace and I can't debug network requests in the chrome console. Here is the fetch I'm sending:

fetch('http://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });
Improve this question
11
  • 2
    I'm not sure. I'm using the iOS simulator and I thought it used my computer's internet connection Commented Jul 17, 2016 at 8:00
  • 8
    http -> https (if possible) will most likely fix your issue Commented Oct 12, 2016 at 0:20
  • 2
    I was using the ip 192.168.1.25:3000 from ifconfig without binding my server to that ip rails server --binging=192.168.1.25 --port=3000 Commented Mar 21, 2019 at 16:03
  • 2
    None of these answers allow you to catch the error. Commented Oct 17, 2019 at 22:39
  • 3
    Yes I tried all. Nothing worked for me Commented Apr 27, 2020 at 4:31

42 Answers 42

Reset to default
1
2
192

The problem here is that iOS does not allow HTTP requests by default, only HTTPS. If you want to enable HTTP requests add this to your info.plist:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
Improve this answer
Sign up to request clarification or add additional context in comments.

17 Comments

This answer worked for me. For others new to React Native, this file (info.plist) can also be edited through xcode: stackoverflow.com/a/38219454/1299792
what about android? I am facing same issue in android as well.
Exactly. Anyone have the answer for android?
I have given INTERNET permission in the AndroidManifest.xml but yet I am having this issue. Any idea how to fix it? I would have torn all my hairs if I had any..grrr
what about android ? Im facing this issue right now
|
81

I was using localhost for the address, which was obviously wrong. After replacing it with the IP address of the server (in the network that emulator is), it worked perfectly.

Edit

In Android Emulator, the address of the development machine is 10.0.2.2. More explanation here

For Genymotion, the address is 10.0.3.2. More info here

Improve this answer

4 Comments

Thank you. Probably the only response I've seen that works for android. Used my networks IP address and it works. eg http://<Network IP emulator connects to>:<port where API is served>/api/tasks
Don't forget the "http://" or else it won't work ... was wondering why it would work on postman but not with fetch
@Mahmoodvcs Your answer help me a lot of, thank you so much, I am using android emulator.
Yes this works. Change from localhost to the actual IP address of your development computer.
68

Not recommended to allow all domains for http. Make an exception for just the necessary domains.

Source: Configuring App Transport Security Exceptions in iOS 9 and OSX 10.11

Add the following to the info.plist file of your app:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>yourserver.com</key>
    <dict>
      <!--Include to allow subdomains-->
      <key>NSIncludesSubdomains</key>
      <true/>
      <!--Include to allow HTTP requests-->
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <true/>
      <!--Include to specify minimum TLS version-->
      <key>NSTemporaryExceptionMinimumTLSVersion</key>
      <string>TLSv1.1</string>
    </dict>
  </dict>
</dict>
Improve this answer

4 Comments

what about android?
There seems to be multiple info.plist files in multiple directories in my React Native app. Any idea which folder contains the correct file to change?
@Marklar [your_project_folder_name]/ios/[your_project_folder_name]/Info.plist
if I use my localhost here: <key>yourserver.com</key>, when ready I'm ready to publish, I'll need to change it, correct?
46

I got the same issue on Android 9 because of the "http" and issue resolved by just adding android:usesCleartextTraffic="true" in AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<application
  android:usesCleartextTraffic="true"
 .......>
 .......
</application>

Improve this answer

2 Comments

Thanks, this worked for me as well. It happens because Android is not supporting HTTP anymore per default on API 28.
Thanks this worked for me too.. I was annoyed because I have 2 projects with the same env and config one is working fine and the second is creating this mess
25

For us it was because we were uploading a file and the RN filePicker did not give the proper mime type. It just gave us 'image' as the type. We needed to change it to 'image/jpg' to get the fetch to work.

form.append(uploadFileName, {
  uri : localImage.full,
  type: 'image/jpeg',
  name: uploadFileName
 })
Improve this answer

2 Comments

@JohhanSantana You could probably look at the raw image data and get it from the beginning, but the react native picker just came back 'image' for me.
this solves my problem
20

if you using localhost just change it :

from :http://localhost:3030 to :http://10.0.2.2:3030

Improve this answer

4 Comments

How do you change it from localhost to your IP address?
@Olumide just change your url . And thanks this worked
I changed it from http://localhost:3000 to http://192.168.1.256:3000 and it worked
http://10.0.2.2:3030 works! But why?
17

I got the same issue on Android but I managed to find a solution for it. Android is blocking cleartext traffic (non-https-requests) since API Level 28 by default. However, react-native adds a network-security-config to the debug version (android/app/src/debug/res/xml/react_native_config.xml) which defines some domains (localhost, and the host IPs for AVD / Genymotion), which can be used without SSL in dev mode. You can add your domain there to allow http requests.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
    <domain includeSubdomains="true">dev.local</domain>
  </domain-config>
</network-security-config>
Improve this answer

2 Comments

This worked for me with react native 0.59 and target sdk 28 :)
that would be nice if I even had res/xml/... path... should I add, will it make a difference? using RN - 0.72 , sdk > 30
16

For Android user:

  1. Replace localhosts to a Lan IP addresses because when you run the project on an Android device, localhost is pointing to the Android device, instead of your computer, example: change http://localost to http://192.168.1.123

  2. If your request URL is HTTPS and your Android device is under a proxy, assume you have installed User-added CA(like burp suite's CA or Charles's CA) in your Android device, make sure your Android version is below Nougat(7.0), because: Changes to Trusted Certificate Authorities in Android Nougat

    User-added CAs
    Protection of all application data is a key goal of the Android application sandbox. Android Nougat changes how applications interact with user- and admin-supplied CAs. By default, apps that target API level 24 will—by design—not honor such CAs unless the app explicitly opts in. This safe-by-default setting reduces application attack surface and encourages consistent handling of network and file-based application data.

Improve this answer

Comments

12

React Native Docs gives the answer for this.

Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project's Info.plist (or equivalent) file.

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

React Native Docs -> Integration With Existing Apps -> Test your integration -> Add App Transport Security exception

Improve this answer

1 Comment

It changed nothing :/
11

The problem may be in server configuration.

Android 7.0 has a bug described here. Workaround proposed by Vicky Chijwani:

Configure your server to use the elliptic curve prime256v1. For example, in Nginx 1.10 you do this by setting ssl_ecdh_curve prime256v1;

Improve this answer

Comments

11

I was having this problem for Android-

URL- localhost/authToken.json - didn't work :(

URL- 10.106.105.103/authToken.json - didn't work :(

URL- http://10.106.105.103/authToken.json - worked :) :D

Note- Use ifconfig on Linux or ipconfig on Windows to find machine IpAddress

Improve this answer

Comments

6

I came across the same issue on Android Emulator, where I tried to access an external HTTPS URL with a valid certificate. But fetching that URL in react-native failed 

'fetch error:', { [TypeError: Network request failed]
sourceURL: 'http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false' }

1) To find out the exact error in the logs, I first enabled 'Debug JS Remotely' using Cmd + M on the app

2) The error reported was

java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.

3) I added the URL's valid certificate using this method -> STEP 2

http://lpains.net/articles/2018/install-root-ca-in-android/

This certificate gets added to the User tab.

4) Add the attribute android:networkSecurityConfig attribute to AndroidManifest.xml

Add a Network Security Configuration file res/xml/network_security_config.xml:

<network-security-config>
    <base-config>
        <trust-anchors>
            <certificates src="user"/>
            <certificates src="system"/>
        </trust-anchors>
    </base-config>
</network-security-config>

This should work and give you an expected response.

Improve this answer

1 Comment

I just needed to do step 4 in order to work. Thanks!
5

For Android, you may have missed to add permission in AndroidManifest.xml Need to add the following permission.

<uses-permission android:name="android.permission.INTERNET" />
Improve this answer

4 Comments

I already do have that even though I am getting that error, is there any other workaround?
@masud_moni you find way to fix the problem? im still having the same problem
@RafaelRotiroti yes i solved that issue, but although it is been a while, it is hard to remember, if you have used the permission and still facing issues, please share details. I will try my best to help, and you will have others also to look into it
@masud_moni thank you, i've fixed that problem using the ip given after run ifconfig command. AVD creates an virtual device, so using the same theory than virtual machines that is nothing hosted in 127.0.0.1 in my device. So i use 192.168.x.x IP and everything works fine as well
5

I have similar problem. In my case requests to localhost was working and suddenly stopped. It turn out that the problem was that I was turn off my wifi on my android phone.

Improve this answer

Comments

4

in my case i have https url but fetch return Network Request Failed error so i just stringify the body and it s working fun

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue'
  })
});

Improve this answer

Comments

3

if you use docker for the REST api, a working case for me was to replace hostname: http://demo.test/api with the machine ip address: http://x.x.x.x/api . You can get the IP from checking what ipv4 you have on your wireless network. You should have also the wifi from phone on.

Improve this answer

Comments

3

By running the mock-server on 0.0.0.0
Note: This works on Expo when you are running another server using json-server.


Another approach is to run the mock server on 0.0.0.0 instead of localhost or 127.0.0.1.

This makes the mock server accessible on the LAN and because Expo requires the development machine and the mobile running the Expo app to be on the same network the mock server becomes accessible too.

This can be achieved with the following command when using json-server

json-server --host 0.0.0.0 --port 8000 ./db.json --watch

Visit this link for more information.

Improve this answer

Comments

3

Just add

<uses-permission android:name="android.permission.INTERNET" />

    <application
      android:usesCleartextTraffic="true"

in your AndroidManifest.xml and then replace fetch URL domain (localhost) with your IP address,

const dataRaw = await fetch('http://192.168.8.102:4000');
Improve this answer

1 Comment

replacing with ip worked.
2

This worked for me, android uses a special type of IP address 10.0.2.2 then port number

import { Platform } from 'react-native';

export const baseUrl = Platform.OS === 'android' ?
    'http://10.0.2.2:3000/'
: 
'http://localhost:3000/';
Improve this answer

1 Comment

Sad that this is the only one that worked for me
2

You should handle the error case in .then for fetch API.

For example:

fetch(authURl,{ method: 'GET'})
.then((response) => {      
  const statusCode = response.status;
  console.warn('status Code',statusCode);
  if(statusCode==200){
    //success code
  }else{
    //handle other error code
  }      
},(err) => {
  console.warn('error',err)
})
.catch((error) => {
  console.error(error);
  return error;
});
Improve this answer

Comments

2

For me ... I have https already ... and the issue went away once I added 'Content-type': 'application/json' to headers

headers: {
  Authorization: token,
  'Content-type': 'application/json',
  /** rest of headers... */
}

Platform: Android

Improve this answer

Comments

1

This is not an answer but option. I switched to https://github.com/joltup/rn-fetch-blob It works good both for form-data and files

Improve this answer

Comments

1

HTTP is not allowed anymore. Pleas use HTTPS

Starting with Android API 28 and iOS 9, these platforms disable insecure HTTP connections by default.

Improve this answer

Comments

1

It my case, it was showing same for https requests as well.

Reinstalling the application solved it.

Improve this answer

Comments

1

Had the same issue with React-native Expo and Node Express back-end. The problem is about a conflict between an emulator localhost and server localhost. Your back-end-server might be ruunning on 127.0.0.1:8000, but an emulator can't find this.

In terminal find your Ipv4-Address with a command 'ipconfig'. For ex., it will be 192.138.1.40

After this put it into your fetch ( 'http://192.138.1.40:8080/'). And what is also important - run your back-end-server with the same host and port. On Node Express for example:

app.listen(8080, () => console.log("Server is running!"))

Improve this answer

1 Comment

Thank you. Your answer worked for me with using express as the backend and an expo application on a real android device.
1

I also have problem is on the android. my android sdk is 28.

I have try and plan. That all unavailable. And my request url is inclues https. request type is post.

after , i founded add the form-data header , can resolve this problem

'Content-Type': 'application/x-www-form-urlencoded'

and the body like this

a=a&b=b
Improve this answer

Comments

1

I faced same issue now resolved :). I Am using django as backend and react native in expo. Run your Django project on your ipv4 address with python manage.py runserver ipv4address:8080 (you can find your ipv4 address by running ipconfig command in terminal).In react native fetch method use this address. fetch methord=

fetch('http://<your ipv4>:8080/endpoint/', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(data)})
Improve this answer

Comments

1

In my case i just change https to http and the problem was resolved (Using android studio).

Improve this answer

Comments

0

The solution is simple update nodejs version 14 or higher

Improve this answer

2 Comments

why this fixes the issue?
because invalid connection over tls in my case
0

"dependencies": {"react": "17.0.2","react-native": "0.66.1"}, I faced this problem with the Android emulator.

  1. Add these lines of code inside AndroidManifest.xml

     <application
  ....
  ....
 android:usesCleartextTraffic="true">

  2. Then, try to run your code in a real physical device, instead of emulator,
    to run on physical devices - connect your usb and try to run npx react-native run-android

Improve this answer

Comments

1
2

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.