React-native: React-Native Network request failed on Android Emulator API 16-19 with specific SSL Cipher suite

Created on 17 Mar 2019 · 33Comments · Source: facebook/react-native

🐛 Bug Report

To Reproduce

This bug is related to React-Native v0.59.1

react-native init testnet
Copy these lines to your App.js above render()

  componentDidMount() {
    this.testNet();
  }

  testNet(){
    console.log("Executing test function");
    fetch('https://reqres.in/api/users?page=2').then(response => response.json()).then(json => console.log("TESTOUTPUT",json['total']))
  }

Try to run project on Android Emulator running on API 16-19 with Google APIs,
You will have this error:

03-18 15:00:36.022 2191-2224/com.testnet W/ReactNativeJS: Possible Unhandled Promise Rejection (id: 0):
    TypeError: Network request failed
    onerror@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:24080:31
    dispatchEvent@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:28724:31
    setReadyState@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:28477:33
    __didCompleteResponse@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:28304:29
    emit@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:3280:42
    __callFunction@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:2577:49
    http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:2334:31
    __guard@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:2531:15
    callFunctionReturnFlushedQueue@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:2333:21
    callFunctionReturnFlushedQueue@[native code]

Notes:

This testing demo is using an HTTPS website, So it's not related to network security config cleartext issue.
The problem occurs with specific SSL/TLS Cipher suites for web-servers which are the following as example:

Cipher suites enabled for https://reqres.in and all other Cloudflare Free plan SSL sites:
TLS_ECDHE_ECDSA_WITH_AES_128_CBC_SHA (0xC009)
TLS_ECDHE_ECDSA_WITH_AES_256_CBC_SHA (0xC00A)
TLS_ECDHE_ECDSA_WITH_AES_128_CBC_SHA256 (0xC023)
TLS_ECDHE_ECDSA_WITH_AES_256_CBC_SHA384 (0xC024)
TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256 (0xC02B)
TLS_ECDHE_ECDSA_WITH_AES_256_GCM_SHA384 (0xC02C)
TLS_ECDHE_ECDSA_WITH_CHACHA20_POLY1305_SHA256 (0xCC14)

It seems the whole project cannot access internet connectivity,
I have the permission in the manifest to access internet

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

Otherwise you can test the same project on Android Emulator running on API 20 or later.

Expected Behavior

Expected console log output with 'TESTOUTPUT', 12.

Code Example

https://snack.expo.io/@areeb111/testnet

Environment

$ react-native info
info 
  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (4) x64 Intel(R) Core(TM) i5-2520M CPU @ 2.50GHz
      Memory: 393.43 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 9.11.1 - /usr/local/bin/node
      npm: 5.6.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 22, 23, 24, 25, 26, 27, 28
        Build Tools: 23.0.1, 23.0.3, 24.0.0, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.1, 27.0.3, 28.0.3
        System Images: android-16 | Google APIs Intel x86 Atom, android-17 | Google APIs Intel x86 Atom, android-19 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom_64, android-23 | Android TV Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.1 => 0.59.1 
    npmGlobalPackages:
      react-native-animatable: 1.2.4
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7
      react-native-modal: 5.4.0

Bug Follow Up Android Locked 🌐Networking

Source

areeb111

👍12

Most helpful comment

Ok. Ive found a workaround:
1) Removed ./android/app/src/debug folder
2) add _android:usesCleartextTraffic="true"_ to ./adnroid/app/src/main/AndroidManifest:

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

RageOfJustice on 22 Mar 2019

👍69 🎉30 ❤27 😄17 👎16 🚀13 👀4 😕1

All 33 comments

I also met this situation.
responseJson TypeError: Network request failed at XMLHttpRequest.xhr.onerror (ReactNativeRenderer-dev.js:18677) at XMLHttpRequest.dispatchEvent (custom-event-target.js:67) at XMLHttpRequest.setReadyState (XMLHttpRequest.js:239) at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:471) at XMLHttpRequest.js:587 at RCTDeviceEventEmitter.emit (core.js:207) at MessageQueue.__callFunction (MessageQueue.js:410) at MessageQueue.js:145 at MessageQueue.__guard (MessageQueue.js:366) at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:144)

dnfwj on 18 Mar 2019

have the same problem, but only with local ip address, and API 28. So, I think it's not really emulator API version issue

my error

console.error: "erer", {"line":24080,"column":31,"sourceURL":"http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false"}
error

<unknown>
lexer.js:479:2
tryCallOne
ReactNativeRenderer-dev.js:4669:6
<unknown>
ReactNativeRenderer-dev.js:4766:14
_callTimer
ReactNativeRenderer-dev.js:9701:10
_callImmediatesPass
ReactNativeRenderer-dev.js:9747:13
callImmediates
ReactNativeRenderer-dev.js:9996:8
__callImmediates
ReactNativeART.js:388:4
<unknown>
ReactNativeART.js:232:6
__guard
ReactNativeART.js:373:1
flushedQueue
ReactNativeART.js:234:19

What is interesitng, if I switch on remote debugging it can send a request, but then fails on handling

ReactNativeRenderer-dev.js:4039 Uncaught Error: unsupported BodyInit type
    at Response.Body._initBody (ReactNativeRenderer-dev.js:4039)
    at new Response (ReactNativeRenderer-dev.js:4337)
    at XMLHttpRequest.xhr.onload (ReactNativeRenderer-dev.js:4386)

vitalii on 19 Mar 2019

👍1

Same problem here after upgrading from 0.57 to ReactNative 0.59.1.
TypeError: Network request failed at XMLHttpRequest.xhr.onerror (47baf4cc-4977-4d41-b6f0-f842f48c5840:23673) at XMLHttpRequest.dispatchEvent (47baf4cc-4977-4d41-b6f0-f842f48c5840:28317) at XMLHttpRequest.setReadyState (47baf4cc-4977-4d41-b6f0-f842f48c5840:28070) at XMLHttpRequest.__didCompleteResponse (47baf4cc-4977-4d41-b6f0-f842f48c5840:27897) at 47baf4cc-4977-4d41-b6f0-f842f48c5840:28007 at RCTDeviceEventEmitter.emit (47baf4cc-4977-4d41-b6f0-f842f48c5840:3290) at MessageQueue.__callFunction (47baf4cc-4977-4d41-b6f0-f842f48c5840:2587) at 47baf4cc-4977-4d41-b6f0-f842f48c5840:2344 at MessageQueue.__guard (47baf4cc-4977-4d41-b6f0-f842f48c5840:2541) at MessageQueue.callFunctionReturnFlushedQueue (47baf4cc-4977-4d41-b6f0-f842f48c5840:2343)

ENV INFO:
React Native Environment Info:
System:
OS: Linux 4.15 Ubuntu 16.04.5 LTS (Xenial Xerus)
CPU: (4) x64 Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz
Memory: 183.18 MB / 7.66 GB
Shell: 4.3.48 - /bin/bash
Binaries:
Node: 8.12.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
npmPackages:
react: ^16.8.4 => 16.8.4
react-native: ^0.59.1 => 0.59.1
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

jahicDario on 19 Mar 2019

👍8 ❤2

My friend tried this bug at his side and he used another testing website https://www.json-generator.com and it works,
After that i have compared SSL certificates for the site i have used in the example above https://reqres.in and https://www.json-generator.com with this SSL Checking tool https://www.ionos.com/tools/ssl-checker and found the difference is Cipher suites enabled in 'reqres.in' are:

Cipher suites enabled:
TLS_ECDHE_ECDSA_WITH_AES_128_CBC_SHA (0xC009)
TLS_ECDHE_ECDSA_WITH_AES_256_CBC_SHA (0xC00A)
TLS_ECDHE_ECDSA_WITH_AES_128_CBC_SHA256 (0xC023)
TLS_ECDHE_ECDSA_WITH_AES_256_CBC_SHA384 (0xC024)
TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256 (0xC02B)
TLS_ECDHE_ECDSA_WITH_AES_256_GCM_SHA384 (0xC02C)
TLS_ECDHE_ECDSA_WITH_CHACHA20_POLY1305_SHA256 (0xCC14)

and for www.json-generator.com which is working fine, The Cipher suites are:

Cipher suites enabled:
TLS_RSA_WITH_3DES_EDE_CBC_SHA (0x000A)
TLS_RSA_WITH_AES_128_CBC_SHA (0x002F)
TLS_RSA_WITH_AES_256_CBC_SHA (0x0035)
TLS_RSA_WITH_AES_128_GCM_SHA256 (0x009C)
TLS_RSA_WITH_AES_256_GCM_SHA384 (0x009D)
TLS_ECDHE_RSA_WITH_AES_128_CBC_SHA (0xC013)
TLS_ECDHE_RSA_WITH_AES_256_CBC_SHA (0xC014)
TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256 (0xC02F)
TLS_ECDHE_RSA_WITH_AES_256_GCM_SHA384 (0xC030)

And found this page https://developer.android.com/guide/topics/security/cryptography?authuser=1#SupportedSSLSocket

Which says none of the 'reqres.in' Cipher suites where compatible with API 16-19.
I hope if there is a workaround to get this fixed.

areeb111 on 19 Mar 2019

Hey 👋 thank you for raising this issue; starting with Android 9 (API level 28 - RN 59 builds with 28), cleartext traffic support is disabled by default.

@jahicDario @vitalii I think this applies to your issue; we added some network security config rules as part of 59 but these will only apply to new apps created through react-native init. For existing apps please could you try following the documentation indicated on the Android tab here: https://facebook.github.io/react-native/docs/integration-with-existing-apps#network-security-config-api-level-28

@areeb111 I think there may be two different issues going on here, if the cleartext configuration change is unrelated please could you let me know.

Thank you

Salakar on 19 Mar 2019

👍5

Thank you Salakar,
Yeah i know about the network security config rules, But this is a HTTPS site so it's not a cleartext issue,
I have checked more and more and discovered that only sites are running with specific Cipher suites like the mentioned above are having problems with OkHttp library for Android APIs 16-19.

areeb111 on 19 Mar 2019

I'm seeing the same thing, "Uncaught Error: unsupported BodyInit type" after upgrading react-native to 0.59.1. Hopefully the following helps someone debug this further:

I'm seeing this on a physical device running Android Pie / Android API Level 28. Also saw this on the iOS Simulator.
This only happens with debugging enabled, I'm using Chrome 73.0.3683.86
I tried adding the network_security_config.xml as suggested above but it didn't make a difference.
I'm on macOS 10.14.3

This is preventing me from debugging anything which makes a network call in Android so it would be great if someone could look at this. Thanks!

Stack Trace

Click to expand

Uncaught Error: unsupported BodyInit type

[email protected]:11
 [email protected]:216
 [email protected]:304
 load (async)
 (anonymous)@MatrixMath.js:280
 [email protected]:72
 [email protected]:424
 [email protected]:144
 [email protected]:280
 fetchWithTimeout@blob:http://localhos…b7dbde8b148e:204812
 [email protected]:108
 [email protected]:57
 [email protected]:101
 prototype.(anonymous function)@index.js:94
 [email protected]:57
 [email protected]:101
 (anonymous)@index.js:101
 [email protected]:72
 [email protected]:424
 [email protected]:144
 [email protected]:101
 [email protected]:101
 prototype.(anonymous function)@index.js:94
 [email protected]:101
 [email protected]:116
 [email protected]:131
 [email protected]:10
 [email protected]:57
 [email protected]:101
 prototype.(anonymous function)@index.js:94
 [email protected]:57
 [email protected]:101
 (anonymous)@index.js:101
 [email protected]:72
 [email protected]:424
 [email protected]:144
 [email protected]:101
 [email protected]:101
 prototype.(anonymous function)@index.js:94
 [email protected]:101
 [email protected]:10
 [email protected]:145
 [email protected]:57
 [email protected]:101
 prototype.(anonymous function)@index.js:94
 [email protected]:57
 [email protected]:101
 (anonymous)@index.js:101
 [email protected]:58
 (anonymous)@ReactNativeRenderer-dev.js:293
 (anonymous)@ReactNativeRenderer-dev.js:5475
 [email protected]:5294
 [email protected]:5342
 [email protected]:5681
 [email protected]:95
 (anonymous)@Commands.js:100
 [email protected]:84
 [email protected]:100
 [email protected]:95
 (anonymous)@debuggerWorker.js:80

plowman on 21 Mar 2019

👍6

The same error like @plowman described. Also tried with axios (just Network error with status code 0) and on API 25 and 28.
But its working on API 23

RageOfJustice on 22 Mar 2019

Ok. Ive found a workaround:
1) Removed ./android/app/src/debug folder
2) add _android:usesCleartextTraffic="true"_ to ./adnroid/app/src/main/AndroidManifest:

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

RageOfJustice on 22 Mar 2019

👍69 🎉30 ❤27 😄17 👎16 🚀13 👀4 😕1

The fix is landed in the master, but still requires some manual configuration in build.gradle. Please see https://github.com/facebook/react-native/pull/23984 for more information. Feel free to comment if issue persists with workaround, and I'll re-open this.

dulmandakh on 2 Apr 2019

❤1 👍1

Fixed for me with add android:usesCleartextTraffic="true" to ./adnroid/app/src/main/AndroidManifest

ahce on 4 Apr 2019

👍1

Thanks it's now fixed!

luiscflores on 6 Apr 2019

❤1

Hi, i'm having the same problem, i have the latest certs and am using android PI on the emulator (28)

Should i go for the fix mentioned in #23984
or should i enable the usesCleartextTraffic, that seems kinda dangerous? thanks

Edit:
I don't see any OnCreate functions in my .java files
Edit2:
Ok, so for some reason the fix didn't work for me?

20145 << I'm having identical issues as he does, also using let's encrypt

OriginLive on 14 Apr 2019

Hello,

I'm having the same Issue about a HTTP service (the error only in simulator with API 28 (Pie) environment). I already add the domain on react_native_config.xml and add the networkSecurityConfig on both Manifests.xml (debug and release) but still get the TypeError: Network request failed error:

My info:
info
React Native Environment Info:
System:
OS: macOS 10.14.2
CPU: (8) x64 Intel(R) Core(TM) i7-3720QM CPU @ 2.60GHz
Memory: 318.58 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.8.0 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 25, 26, 27, 28
Build Tools: 25.0.0, 25.0.1, 26.0.2, 27.0.3, 28.0.3
System Images: android-25 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5199772
Xcode: 10.2/10P91b - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.0 => 0.59.0
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

My react_native_config.xml:

acolhebrasil.com.br

localhost
10.0.2.2
10.0.3.2

My fetch:
fetch(baseURLAPI + action, {
method: method,
headers: headers,
body: bodyObj ? JSON.stringify(bodyObj) : null
}).then((response) => {
console.log(response)
if(response.ok){
return response.json();
}

    throw new Error(response.text());
})
.then((responseJson) => {
    console.log(responseJson)
    if(callbackSuccess){
        return callbackSuccess(responseJson);
    }
})
.catch((error) => {
    console.log(error)
    if(callbackError){
        return callbackError(error);
    }
});

My API: http://acolhebrasil.com.br/Sistema/api/login/

Console:
TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (ReactNativeRenderer-dev.js:3731)
at XMLHttpRequest.dispatchEvent (ReactNativeRenderer-dev.js:10394)
at XMLHttpRequest.setReadyState (ReactNativeRenderer-dev.js:10127)
at XMLHttpRequest.__didCompleteResponse (ReactNativeRenderer-dev.js:9895)
at ReactNativeRenderer-dev.js:10051
at RCTDeviceEventEmitter.emit (blob:http://localhost:8081/9854a9b9-407d-4571-8675-e6fadd170803:3282)
at MessageQueue.__callFunction (ReactNativeART.js:13)
at blob:http://localhost:8081/9854a9b9-407d-4571-8675-e6fadd170803:2336
at MessageQueue.__guard (ReactNativeART.js:10)
at MessageQueue.callFunctionReturnFlushedQueue (blob:http://localhost:8081/9854a9b9-407d-4571-8675-e6fadd170803:2335)

mttrthomazelli on 26 Apr 2019

This fixed it for me with apollo client.

immortalx on 30 Apr 2019

For detailed information you can refer to this:
https://medium.com/@son.rommer/fix-cleartext-traffic-error-in-android-9-pie-2f4e9e2235e6

I will quote from the article:

baselbj on 16 Jun 2019

Worked the first time I lunch the app (release) but if I close it and open again, it can't connect to the api again

SerotoninaAbad on 19 Jun 2019

still didnt resolve the issue. i removed the ./android/app/src/debug folder, added the android:usesCleartextTraffic application tag inside ./android/src/main/AndroidManifest.xml but still showing below error. Please anybody help

TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (691a5233-3b7d-4b46-9…-c070b1174550:42527)
at XMLHttpRequest.dispatchEvent (691a5233-3b7d-4b46-9…-c070b1174550:47969)
at XMLHttpRequest.setReadyState (691a5233-3b7d-4b46-9…-c070b1174550:46830)
at XMLHttpRequest.__didCompleteResponse (691a5233-3b7d-4b46-9…-c070b1174550:46657)
at 691a5233-3b7d-4b46-9…-c070b1174550:46767
at RCTDeviceEventEmitter.emit (691a5233-3b7d-4b46-9…-c070b1174550:16846)
at MessageQueue.__callFunction (691a5233-3b7d-4b46-9…-c070b1174550:16459)
at 691a5233-3b7d-4b46-9…-c070b1174550:16216
at MessageQueue.__guard (691a5233-3b7d-4b46-9…-c070b1174550:16413)
at MessageQueue.callFunctionReturnFlushedQueue (691a5233-3b7d-4b46-9…-c070b1174550:16215)

azuddin on 3 Jul 2019

👍9

Add the codes in your main AndroidManifest.xml

manifest => xmlns:tools="http://schemas.android.com/tools"
application=> android:usesCleartextTraffic="true" tools:targetApi="28"

And make sure u still use http:// not https:// to fetch . it can working on Android 9 with API 28

dqhung311 on 6 Jul 2019

👍3

thanks @RageOfJustice it worked but i dont understand why deleting debug folder, can you please mention the reason for deleting debug folder

yusuf987 on 28 Jul 2019

android:usesCleartextTraffic="true" in the manifest work for me. Thankyou

bbeckk on 30 Aug 2019

I am facing this issue on android device , on emulator its workling fine ,
on device it is showing error "type error Network request failed "

ramanasak on 11 Sep 2019

I had the same while I was using Fetch API, I just couldn't connect to server even it had SSL certificate, then I started to use axios and it's working!

Michaela97 on 4 Oct 2019

It's working!

AnkitAnandTopno on 4 Oct 2019

👍2

Thank you, it's working

ddxxtony on 21 Oct 2019

@RageOfJustice thank you so much .. its worked for me.

manishakamble on 11 Dec 2019

Just adding android:usesCleartextTraffic="true" worked for me. If you're using localhost API, make sure to put your IPV4 instead of use localhost, example:
...

const client = new ApolloClient({
  uri: 'http://192.168.1.102:4000/graphql',
})

andersoncscz on 11 Dec 2019

❤2 👍2 🚀1

@dulmandakh thanks !!

brunodias28 on 11 Dec 2019

Hello, I also had this error, but I forgot the file to create ".ENV".

arjdev69 on 7 Jan 2020

luisAzcuaga on 9 Jan 2020

In my case i already have this, just need to delete debug folder and it works! Thanks

satriapr on 22 Jan 2020

👍1

network request failed in Android 9 all this solution not working.

    buildToolsVersion = "28.0.3"
    minSdkVersion = 19
    compileSdkVersion = 29
    targetSdkVersion = 29

React Native "react-native": "0.60.0"

click2cloud-parag on 16 Mar 2020

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

and if your api is running on localhost: do the following
Google "get localhost ip" for Mac or Windows then change your apiEndpoint to e.g
http://192.163.2.100:5000 using your own IP after http://...