React-native: Fetch throws 'Network request failed' on Android SDK Platform 24

[DmitryMaksakov]

Is this a bug report?

Yes

Have you read the Bugs section of the Contributing to React Native Guide?

Yes

Environment

1. react-native -v: react-native-cli: 2.0.1 react-native: 0.46.3
2. node -v: v7.7.3
3. npm -v: 4.1.2
4. yarn --version (if you use Yarn): ---

Then, specify:

• Target Platform: Android

• Development Operating System: macOS Sierra 10.12.5 (16F73)

• Build tools: Android Studio

Steps to Reproduce

fetch('https://pricesea.ru/api/auth/info', {
      credentials: 'include'
    }).then(res => {
        ...
      }).catch((e) => {
        console.log(e);
      });

Expected Behavior

Request should return HTTP code 200 and some data or HTTP code 401.

Actual Behavior

I have an error:

TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (fetch.js:441)
at XMLHttpRequest.dispatchEvent (event-target.js:172)
at XMLHttpRequest.setReadyState (XMLHttpRequest.js:546)
at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:381)
at XMLHttpRequest.js:485
at RCTDeviceEventEmitter.emit (EventEmitter.js:181)
at MessageQueue.__callFunction (MessageQueue.js:260)
at MessageQueue.js:101
at MessageQueue.__guard (MessageQueue.js:228)
at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:100)

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

I have tested different API SDK Platform versions (from 22 up to 26), the problem reproduces only on API SDK Platform 24 (Android 7.0).
I also did this request via native Android app and it was successful on all Platform versions, even 24.

[hramos]

Just curious, does this reproduce using Snack?

[DmitryMaksakov]

@hramos, this doesn't reproduces using Snack: https://snack.expo.io/rJYNZk0B- works fine.

[diegocouto]

Hi @DmitryMaksakov, I have just started to face this same issue when I updated our react-native package to 0.46.4.

What's odd is that, on development, using a Ngrok URL to our local server, everything works, but not with our production API URL.

Update

That's a bug on Android 7.0, as described here. I could get it working on Android using the first workaround proposed by Vicky Chijwani, which was:

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

[SirNeuman]

thank you @diegocouto! Changing my nginx config from ssl_ecdh_curve secp384r1 to ssl_ecdh_curve prime256v1 absolutely fixed this problem for me.

[hramos]

Appears to be a bug with Android. Closing.

[cinder92]

Same issue with iOS and android in react native version 0.48.2

[song50119]

Same issue with : "react-native": "^0.46.4"

[fsunset]

Hey @cinder92, @pvsong - have you reached a fix for it? I'm facing the very same issue after upgrading to 0.50 :/ I appreciate your replies.

[mkmuduli]

i have also same issue ,plz provide solution

[paulus6lau]

@diegocouto and @hramos , if it is android 7.0 bug, why does native request work well on Android 7.0 for same url as mentioned by @DmitryMaksakov

[paulus6lau]

and for the sample https://snack.expo.io/rJYNZk0B- shared by @DmitryMaksakov , it always shows "Network request failed"

[dben89x]

Damn. Same boat here.

[urska19]

I had the same problem after upgrading to react 0.49 and react 0.52. Everything was fine with react 0.15. (Yes, it was about time to do the upgrade :P). I did not like the idea of changing our server settings, so what I did was following. I forked https://github.com/wkh237/react-native-fetch-blob, added the necessary cipher suites and changed all _fetch_ functions with _RNFetchBlob.fetch_ and now it works again.
Let me also say, that without altering _RNFetchBlob.fetch_, I was getting _Handshake failed_ error.

[mharrisweb]

Same here, any fix yet?

[tkalejaiye]

Currently having this same issue, but I tried running on Android 6.0 with sdk 23 and the issue still persists

[Deniscapp]

Same problem here. I am on 0.53

[zhaonian]

same issue on 0.54

[woodenlim]

same issue 0.55

[corya0687]

same .54

[Wowgreat]

same .54

[jjd314]

I was getting the same error this morning. fetch worked on my Android 7.1.1 device, but not on an Android 6.0 one. I then ran across this post https://community.letsencrypt.org/t/unable-to-get-local-issuer-certificate/15004. I was also using the plain certificate in my ssl setup; when I switched to using the full chain certificate (i.e., the one with all the intermediaries, too) fetch started working on both devices.

[ericLoansnap]

I'm having this issue, but the server is using chain - thoughts, @jjd314 ?

[jjd314]

Sorry, @ericLoansnap, I don't have a clue. I was just lucky that I stumbled on that other post. Apart from suggesting obvious things like making sure the certificate works with something other than react-native, I have no advice. Good luck.

[Pradeep119]

if you point to the local host web service. The solution is to replace localhost with the IP address of your machine. but ios works fine

[banli17]

i dont know why, but uninstall apk and reinstall ，it's ok