React Native fetch () Network Request Error

Question

When I create a new project using react-native init (version RN 0.29.1) and place the selection in the rendering method in the public API of the facebook demo movie, it issues a Network Request Failed . There is a very useless stack trace, and I cannot debug network requests in the chrome console. Here is the selection I'm posting:

 fetch('http://facebook.imtqy.com/react-native/movies.json') .then((response) => response.json()) .then((responseJson) => { return responseJson.movies; }) .catch((error) => { console.error(error); }); 

Answer 1

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> 

Answer 2

It is not recommended that you allow all domains for http. Make an exception only for the necessary domains.

Source: Configuring transport security exceptions for iOS 9 and OSX 10.11

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

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

Answer 3

I used localhost for the address, which was clearly wrong. After replacing the server with the IP address (in the network where the emulator is located), everything worked fine.

edit

In the 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

Answer 4

React Native Docs provides an answer to this question.

Apple has blocked implicit loading of HTTP resources in clear text. Therefore, we need to add the following file to our Info.plist project (or equivalent).

 <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 Applications -> Integration Check -> Add Application Transport Security Exception

Answer 5

The problem may be in the server configuration.

Android 7.0 contains a description here . Workaround proposed by Vicki Chijwani:

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

Answer 6

For us, this was because we uploaded the file, and RN filePicker did not give the correct type of mime. It just gave us an “image” as a type. We needed to change it to "image / jpg" in order to make the work work.

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

Answer 7

I got the same problem on Android, but I managed to find a solution for it. Android blocks traffic in clear text (not https requests), starting from API level 28 by default. However, native-reactive adds the network security configuration to the debug version ( android/app/src/debug/res/xml/react_native_config.xml ), which defines some domains (localhost and host IP addresses for AVD / Genymotion), which can be used without SSL in development 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> 

Answer 8

For Android, you might have skipped to add permission to AndroidManifest.xml You need to add the following permission.

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

Answer 9

I have a similar problem. In my case, requests to localhost worked and suddenly stopped. It turned out that the problem was that I turned off my Wi-Fi on my Android phone.

Answer 10

I had this problem for android

URL- localhost / authToken.json - does not work :(

URL 10.106.105.103/authToken.json - does not work :(

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

Note- Use ifconfig on Linux or ipconfig on Windows to find the ipaddress of a computer

Answer 11

For Android user:

1. Replace localhost with Lan IPs, because when you start a project on an Android device, localhost points to the Android device and not to your computer, for example: change http://localost to http://192.168.1.123

2. If the URL of your request is HTTPS, and your Android device uses a proxy server, suppose your Android device has an added CA user- installed (for example, CA Burp Suite or Charles CA), make sure your version of Android is lower Nougat (7.0) because: Changes to trusted certification authorities in Android Nougat
   

   user- added CA
   Protecting all application data is a key goal of the Android application sandbox. Android Nougat changes the interaction of applications with user- and certification authorities provided by the administrator. By default, API 24-oriented applications will not by nature consider such CAs unless the application explicitly chooses this option. This default safe option reduces the attack surface of applications and provides consistent processing of network and file data of applications.

Answer 12

I ran into the same issue in the Android emulator where I was trying to access an external HTTPS URL with a valid certificate. But getting this url in reaction-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 turned on "Debugging JS Remote" using Cmd + M in the application

2) The error message was

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

3) I added a valid URL certificate using this method -> STEP 2

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

This certificate is added to the User tab.

4) Add android:networkSecurityConfig in AndroidManifest.xml

Add the 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 the expected answer.

Answer 13

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

 import { Platform } from 'react-native'; export const baseUrl = Platform.OS === 'android' ? 'http://10.0.2.2:3000/' : 'http://localhost:3000/'; 

Answer 14

if you use docker for the REST API, for me it would be http://demo.test/api to replace the host name: http://demo.test/api with the computer ip address: http://xxxx/api . You can get the IP address by checking which ipv4 is used on your wireless network. You must also have Wi-Fi from your phone.

Answer 15

You must handle the error in .then to get the 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; }); 

Answer 16

It’s just that you have changes to Fetch ....

 fetch('http://facebook.imtqy.com/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); }); 

Answer 17

The reason that your own network request error responds The device must be connected to Wi-Fi and must be on the API server.

* API for server ** * Open Wi-Fi device ***

Answer 18

For Android, add android: networkSecurityConfig = "@ xml / network_security_config" in the tag

network_security_config.xml

 <?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> <base-config cleartextTrafficPermitted="true" /> </network-security-config> 

Answer 19

For Android devices, go to the root folder of your project 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 force your physical device (such as an Android phone) to listen on the localhost server running on your developer's computer (that is, on your computer) at http: // localhost: [your_own_server_port] .

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

Answer 20

Example:

 return fetch('http://<your ip>') .then((response) => response.json()) .then((responseJson) => { console.log(responseJson) }) .catch((error) => { console.error(error); });