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

[paulus6lau]

Is this a bug report?

Yes

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

Yes

Environment

react-native -v: react-native-cli: 2.0.1 react-native: 0.46.3
node -v: v7.7.3
npm -v: 4.1.2
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

the bug(https://github.com/facebook/react-native/issues/15100) is reported by @DmitryMaksakov but closed with not-finding root cause.

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

[paulus6lau]

https://snack.expo.io/rJYNZk0B- can repro the issue consistently for me with Android 24 sdk.

if it is android 7.0 bug, why does native request work well on Android 7.0 for the same url.

[mnshkv]

https://stackoverflow.com/questions/39133437/sslhandshakeexception-handshake-failed-on-android-n-7-0

adding ssl_ecdh_curve prime256v1; to your /etc/nginx/snippets.d/ssl_default

it's android 7.0 bug( not react native)
or from dev use android 7.1.1 or lowless

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[paulus6lau]

@mnshkv if it is android 7.0 bug, then why does native http request code work well?

[mnshkv]

@paulus6lau i think problem in RCT-Network

[woodenlim]

Same.. Latest RN version.. Axios and Fetch also not able to fetch https request but http yes.. Android

[woodenlim]

same issue on 0.55.. please fix.. Orz

[havinhthai]

+1

[glynnallen1704]

same issue too. Works fine on iOS
react native 0.55.1

[sooxt98]

I had added TRY ... CATCH ... within it, but it still cant handle the exception :( +1

[havinhthai]

We can catch error by this way (from docs):

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

Case you want to config (from docs):

  // `validateStatus` defines whether to resolve or reject the promise for a given
  // HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
  // or `undefined`), the promise will be resolved; otherwise, the promise will be
  // rejected.
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  }

[sooxt98]

@havinhthai What can i do next ><

[havinhthai]

@sooxiaotong I solved this issue by replace url (ex: https://wifi.unifi.com.my) to IP of Server.

example: If in local, you can replace http://localhost:3000 to http://23.45.42.23:3000 (23.45.42.23 is IP of your laptop)

[hugohow]

+1

[treemore]

i have a problem like this.
when do an fetch with mehod:"HEAD" . there is always says "Network request failed" .
ios is fine. but android 7 can not work.
when i use method:"GET" ,that is ok.
and use charles i can see the send out and response.status=200

[ericLoansnap]

This remains an issue with react-native 0.55.4, and is present on 0.55.3, 0.55.2, 0.55.1, and 0.55.0. It turns out that the react-apollo library also depends on this.

[Chatharaju]

Am using react-native 0.55.1, Android seems working fine on my end but I have this issue with iOS. I have played with AppTransportSecurity protocol as well. Any solutions other than downgrading RN version

[ethanyuwang]

Having the same problem. Works fine on iOS

[ericLoansnap]

Turns out the problem is the Android bug, and here is how to fix it:
https://developers.google.com/pay/api/android/guides/resources/payment-data-cryptography#the-signature-algorithm

I think this should return an Exception when the version is Android 7 to verify that the security settings are correct.

For reference, this is how the solution was found: https://stackoverflow.com/questions/45170365/react-native-fetch-throws-network-request-failed-on-android-7-but-works-fin#45278124

[KthProg]

I'm having this issue. I also get some error about "Tunnels" that I can't log so I don't know anything else. This is https POSTing to an Azure web service. The certificate chain is just fine. Using the IP address is not an option obviously, as Azure will probably load balance requests. I also can't change how it handles certificates, that's entirely out of my control.

[yeknava]

Im experiencing same issue, im updating (rewriting) my app with newer version (RN 56). but funny thing is my old app works pretty fine with same request to same https server on same android 7 device and it was written by RN 42. i think there is something between android 7 and okhttp that cause this problem.

[KthProg]

I detached with Expo. That seemed to be a cause of the issue. To fix it, I had to run exp publish in the root (js code) directory before I run gradlew assembleRelease in the android directory. I have to do this for every single build. It seems like there's needs to be some more communication and testing between the two teams because almost nothing worked the way it should when I detached from a project started with Expo and I had to implement _many_ custom fixes.

[yeknava]

@KthProg I dont use expo and building my apps with native code but still experiencing same issue.

[KthProg]

I can't be totally sure what the cause is then. Mine was fixed once the bundle scripts were generated. There may have been an issue with the version of React Native/Expo I was using. I deleted everything I had and brought it all down from source control, then installed all the packages again and upgraded Expo to the latest.

[KthProg]

My issue was only in production by the way, so it may have been a different issue related to Expo.

[ethanyuwang]

it seems like it has something to do with gzip. If I add the header 'Accept-Encoding': 'gzip', I was able to log the response. However, the response body is empty:

{ type: 'default',
status: 200,
ok: true,
statusText: undefined,
headers: 
{ map: 
{ date: 'Mon, 27 Aug 2018 18:39:23 GMT',
'content-type': 'application/json',
'content-length': '215',
'content-encoding': 'gzip',
'cache-control': 'no-cache' } },
url: 'http://test....list',
_bodyInit: '',
_bodyText: '' }

[KthProg]

Since the issue is "closed" they will probably not get notified about our comments anyways. I would try to find a more recent similar issue, create a new issue and mention this one, or mention one of the developers names here. @mnshkv (hopefully that works?)

[balwinder4264]

If it is working with Ios then replace localhost to main ip address of Your computer.

[adirzoari]

@paulus6lau same issue in android. any solution?

[balwinder4264]

@adirzoari use network ip address where you are using localhost for sending request.

[adirzoari]

@balwinder4264 it happen my in production version (not with localhost address).. I send to real address and it happen when no internet connection

[balwinder4264]

@adirzoari if there is no internet connection use 127.0.0.1 instead localhost. If you maintain server in your machin. Or if you are sending request outside obviously you should have internet connection.

[adirzoari]

@balwinder4264 umm but if suddenly there is no internet connection, I can't replace it to 127.0.0.1.. I work with specific url to get data, but if no internet it shows me 'Network request failed'

[balwinder4264]

@adirzoari because you can’t access intrnet URL without internet.!! As u can not send message on whatsapp without internet

[adirzoari]

@balwinder4264 I know I agree with it, but how I catch this error and show to the users specific error in this case?

[balwinder4264]

@adirzoari put your request in try catch and make alert in catch block alert(“network error”)

[nickjuntilla]

The problem for me was that React Native brought back the type 'image' for images from the picker. The type passed to the file uploader needed to be like 'image/jpg'

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

[jifromz09]

@sooxiaotong I solved this issue by replace url (ex: https://wifi.unifi.com.my) to IP of Server.

example: If in local, you can replace http://localhost:3000 to http://23.45.42.23:3000 (23.45.42.23 is IP of your laptop)

-The most suggested answer even on stackoverflow, I tried this solution many times, but the issue still persist.

[Dgs-asohail4]

I cannot understand whats the point of error message "Network request failed" ... what happened the cold weather caught it or the aliens from the future took it... a bit more detail would be appropriate @nickjuntilla answer was close to my use case but it didn't work either.

` const { name, date, description, location, uri, mime, time } = this.state;

const value = {
  name,
  date,
  description,
  location,
  time
}

const formData = new FormData();
formData.append('name', name)
formData.append('date', date)
formData.append('description', description)
formData.append('location', location)
formData.append('time', time)

formData.append('image',{
  uri:uri,
  mime:'image/jpeg',
  name:`image${moment()}`
})


alert(JSON.stringify(formData));
const config = {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
      },
      body: formData,
  };

fetch(`http://${Config.apihost}:${Config.port}/events`,config).then((res) => res.json())
  .then((res) => {
    this.setState({ modalVisible: false, name:'', date: moment().format('YYYY-MM-DD'), description:'', Location: 'AlHedaya Masjid' })
    this.props.addEvent(res.message);

  // this.props.navigation.goBack();
  }).catch((err) => alert(err));

`