React Native fetch() Network Request Failed

Question

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);
      });

I'm not sure. I'm using the iOS simulator and I thought it used my computer's internet connection — Alek Hurst, Jul 17 '16 at 08:00
Try loading the simulator manually and opening the url in safari — FuzzyTree, Jul 17 '16 at 22:32
`http` -> `https` (if possible) will most likely fix your issue — Nick Zuber, Oct 12 '16 at 00:20
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` — Fabrizio Bertoglio, Mar 21 '19 at 16:03
@VigneswaranA there are more than 15 upvoted answers to this question. Did you try to apply any of these solutions? Nothing worked for you? — Christos Lytras, Apr 26 '20 at 13:33
@VigneswaranA, this helped me: https://github.com/joltup/rn-fetch-blob/issues/116#issuecomment-405350732 — Sergii, May 08 '20 at 09:43

score 162 · Accepted Answer · edited Jun 04 '18 at 20:05

162

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>

edited Jun 04 '18 at 20:05

Ronan Boiteau

8,910
6
33
52

answered Jul 18 '16 at 02:31

Alek Hurst

4,077
5
16
24

2

This answer worked for me. For others new to React Native, this file (info.plist) can also be edited through xcode: http://stackoverflow.com/a/38219454/1299792 – Marklar Feb 28 '17 at 22:26
its not add but replace. The code is already in the info.plist, you need to replace the section or you will get an error. – osuthorpe Apr 06 '17 at 05:42
126

what about android? I am facing same issue in android as well. – Vijay Sharma May 19 '17 at 09:45
28

Exactly. Anyone have the answer for android? – Zach Cook Aug 31 '17 at 06:15
1

when i put that on ios/build/info.plist and run: react-native run-ios The ios/build/info.plist is overwritten and quit my changes What should i do ? – Jorge Wander Santana Ureña Oct 04 '17 at 12:22
1

@JorgeWanderSantanaUreña modify [your_project_folder_name]/ios/[your_project_folder_name]/In‌fo.plist – kgosse Oct 31 '17 at 00:15
For Android give INTERNET permission – JanithaR Nov 22 '17 at 05:26
2

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 – masud_moni Apr 25 '18 at 06:15
@masud_moni have you find any solution? – Sujit May 08 '18 at 06:08
I have a partial solution. :( I just can send the request to the server, not my localhost. – masud_moni May 08 '18 at 06:13
1

what about `android` ? Im facing this issue right now – kurniawan26 May 14 '18 at 04:42
@kurniawan26 have you found any solution? – Sujit May 16 '18 at 10:09
@Sujit yup, I solved it. In my case it was Android emulator always sent `charset: utf-8` on the header. so I need to ask my friend (backend) to changed the `nginx` setting to allow that additional header. – kurniawan26 May 17 '18 at 02:35
@kurniawan26 For me the issue with Certificate. – Sujit May 17 '18 at 13:40
I am using expo to run the application on my iOS device. I made these changes but did not work. Any solutions that work? – Pulasthi Aberathne Oct 16 '21 at 22:24

score 65 · Answer 2 · answered Jul 24 '16 at 18:46

65

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>

answered Jul 24 '16 at 18:46

Lavi Avigdor

3,832
3
23
28

47

what about android? – arisalexis Nov 02 '16 at 11:42
3

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 Feb 28 '17 at 06:27
2

@Marklar [your_project_folder_name]/ios/[your_project_folder_name]/Info.plist – Stich Apr 05 '17 at 12:09
if I use my localhost here: yourserver.com, when ready I'm ready to publish, I'll need to change it, correct? – Anayo Oleru May 23 '20 at 06:33

Mahmood Dehghan · Answer 3 · 2018-11-27T08:35:54.570

60

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

edited Nov 27 '18 at 08:35

answered Feb 17 '18 at 16:42

Mahmood Dehghan

7,021
4
55
68

5

Thank you. Probably the only response I've seen that works for android. Used my networks IP address and it works. eg `http://:/api/tasks` – Brandon Benefield Jul 19 '18 at 07:35
3

Don't forget the "http://" or else it won't work ... was wondering why it would work on postman but not with fetch – Moumou Jul 31 '18 at 20:48
@Mahmoodvcs Your answer help me a lot of, thank you so much, I am using android emulator. – Pena Pintada Aug 30 '19 at 00:03
Yes this works. Change from localhost to the actual IP address of your development computer. – Daggie Blanqx - Douglas Mwangi Aug 28 '21 at 20:33

score 30 · Answer 4 · answered Nov 28 '19 at 12:37

30

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>

answered Nov 28 '19 at 12:37

kautikmistry

586
5
8

4

Thanks, this worked for me as well. It happens because Android is not supporting HTTP anymore per default on API 28. – Gui Herzog Dec 01 '19 at 18:57

score 21 · Answer 5 · edited Nov 27 '18 at 07:33

21

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
 })

edited Nov 27 '18 at 07:33

bunbun

2,556
3
30
51

answered Nov 27 '18 at 07:04

NickJ

456
4
10

@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. – NickJ Jan 15 '19 at 02:06

score 15 · Answer 6 · answered Mar 07 '19 at 09:39

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>

This worked for me with react native 0.59 and target sdk 28 :) — sameera madushan, Jul 31 '19 at 07:23

ocean · Answer 7 · 2019-01-31T17:16:18.197

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

fangxing · Answer 8 · 2018-12-09T03:27:44.023

For Android user:

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
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.

Dmitry Maksakov · Answer 9 · 2017-07-24T14:21:51.577

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;

edited Jul 24 '17 at 14:21

answered Jul 18 '17 at 10:08

Dmitry Maksakov

1,354
1
15
22

score 9 · Answer 10 · answered Aug 14 '18 at 13:53

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

score 9 · Answer 11 · answered Feb 20 '21 at 20:56

9

if you using localhost just change it :

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

answered Feb 20 '21 at 20:56

Yazan Najjar

1,367
13
6

How do you change it from localhost to your IP address? – Olumide Mar 19 '21 at 06:13
@Olumide just change your url . And thanks this worked – Necmettin Sargın Mar 30 '21 at 21:44

score 6 · Answer 12 · answered May 13 '19 at 22:46

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.

I just needed to do step 4 in order to work. Thanks! – Bruno Serrano Oct 09 '19 at 02:47 — Bruno Serrano, Oct 09 '19 at 02:47

score 4 · Answer 13 · answered Jun 06 '17 at 13:49

4

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" />

answered Jun 06 '17 at 13:49

Shashwat

487
4
8

I already do have that even though I am getting that error, is there any other workaround? – masud_moni Apr 22 '18 at 05:30
@masud_moni you find way to fix the problem? im still having the same problem – Rafael Rotiroti Oct 30 '19 at 12:56
@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 Oct 30 '19 at 20:31
@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 – Rafael Rotiroti Oct 31 '19 at 14:42

score 4 · Answer 14 · answered May 17 '18 at 16:26

4

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.

answered May 17 '18 at 16:26

Ивайло Янков

63
5

score 3 · Answer 15 · answered Jan 18 '19 at 19:07

3

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/';

answered Jan 18 '19 at 19:07

Cho Cho

119
3
11

Sad that this is the only one that worked for me – aletede91 Apr 26 '21 at 15:17

score 2 · Answer 16 · answered Feb 12 '19 at 12:53

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.

score 2 · Answer 17 · answered Jun 11 '19 at 04:41

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;
});

score 2 · Answer 18 · answered Aug 09 '20 at 07:22

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.

score 2 · Answer 19 · answered Jan 06 '21 at 07:14

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'
  })
});

score 1 · Answer 20 · answered May 05 '21 at 09:44

1

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

answered May 05 '21 at 09:44

Hend El-Sahli

5,201
1
20
37

Mher Aghabalyan · Answer 21 · 2021-09-24T00:57:21.110

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.

edited Sep 24 '21 at 00:57

answered Sep 24 '21 at 00:51

Mher Aghabalyan

720
5
21

score 1 · Answer 22 · answered Feb 06 '22 at 18:25

1

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');

answered Feb 06 '22 at 18:25

lakjeewa Wijebandara

276
4
7

replacing with ip worked. – CrackerKSR Feb 17 '22 at 07:44

score 1 · Answer 23 · answered Feb 23 '22 at 06:38

1

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

Reinstalling the application solved it.

answered Feb 23 '22 at 06:38

cmcodes

1,154
15
21

score 0 · Answer 24 · edited May 11 '20 at 10:41

0

Add android:usesCleartextTraffic="true" line in AndroidManifest.xml.
Delete all debug folder from your android folder.

edited May 11 '20 at 10:41

4b0

20,627
30
92
137

answered May 11 '20 at 10:36

devkrkanhaiya

57
3

score 0 · Answer 25 · answered Aug 23 '20 at 12:02

0

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

answered Aug 23 '20 at 12:02

Dharmik

2,285
2
25
36

score 0 · Answer 26 · edited Sep 06 '20 at 21:45

0

The solution is simple update nodejs version 14 or higher

edited Sep 06 '20 at 21:45

Bhargav Rao

45,811
27
120
136

answered Sep 06 '20 at 21:21

Nelson Javier Avila

81
1
6

why this fixes the issue? – eggsloveoats Nov 10 '21 at 04:32
because invalid connection over tls in my case – Nelson Javier Avila Nov 11 '21 at 01:06

score 0 · Answer 27 · answered Oct 28 '21 at 14:59

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

Add these lines of code inside AndroidManifest.xml

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

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

Lavaraju · Answer 28 · 2018-03-06T05:04:40.663

Just you have Changes in Fetch....

fetch('http://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
        /*return responseJson.movies; */
        alert("result:"+JSON.stringify(responseJson))
        this.setState({
            dataSource:this.state.dataSource.cloneWithRows(responseJson)
        })
     }).catch((error) => {
         console.error(error);
     });

score -1 · Answer 29 · edited Dec 24 '18 at 21:38

For Android devices, go to your project root folder and run the command:

adb reverse tcp:[your_own_server_port] tcp:[your_own_server_port]

e.g., adb reverse tcp:8088 tcp:8088

This will make your physical device(i.e. Android phone) listen to the localhost server running on your development machine (i.e. your computer) on address http://localhost:[your_own_server_port].

After that, you can directly use http:localhost:[your_port] /your_api in your react-native fetch() call.

xyz · Answer 30 · 2019-12-17T07:38:14.970

For android, add android:networkSecurityConfig="@xml/network_security_config" to application tag in AndroidManifest.xml, like this:

    <?xml version="1.0" encoding="utf-8"?>
    <manifest ... >
        <application android:networkSecurityConfig="@xml/network_security_config"
                        ... >
            ...
        </application>
    </manifest>

network_security_config.xml file content:

<?xml version='1.0' encoding='utf-8'?>
<network-security-config>
<debug-overrides>
    <trust-anchors>
        <!-- Trust user added CAs while debuggable only -->
        <certificates src="user" />
    </trust-anchors>
</debug-overrides>

<!-- let application to use http request -->
<base-config cleartextTrafficPermitted="true" />
</network-security-config>

could you please elaborate, and explain in details? I am just curious how it works? — GD- Ganesh Deshmukh, Nov 26 '19 at 16:08

score -1 · Answer 31 · answered Oct 30 '20 at 21:13

-1

In my case, the Android emulator wasn't connected to the Wi-Fi.

See here Android Studio - Android Emulator Wifi Connected with No Internet

answered Oct 30 '20 at 21:13

aviggiano

812
14
21

React Native fetch() Network Request Failed

31 Answers31

Linked