React-native: fetch fails with [TypeError: Network request failed] on Android with certain url

[bosung90]

Reproduced on React-Native 0.21, 0.22.0 , and 0.22.2

fetch('https://api-dev.semios.com/', {
     method: 'POST',
   }).then((response) => {console.log(response)}).catch((error) => {console.log(error)})

fails with [TypeError: Network request failed] only on Android -- this works properly on iOS
Reproduced with https://rnplay.org/apps/MUs3SQ

I/ReactNativeJS( 2790): [TypeError: Network request failed] 

[brentvatne]

cc @lexs

[lexs]

Turns out OkHttp/Android rejects the certificate, error is java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.

More info about this here: http://developer.android.com/training/articles/security-ssl.html

This is not a RN issue but rather an issue with api-dev.semios.com certificate. You'll either have to accept pin their certificate or accept all (bad). You should talk to Semios about this. I'll close this out.

[ide]

Their cert looks OK:

Maybe check that you're not getting MITM'd by your device, development laptop (if you're proxying traffic through it), or your ISP.

[lexs]

@ide Somehow Android/OkHttp still rejects it. Might wanna try the request with vanilla OkHttp.

I don't think this is MITM or anything like that as both me and @bosung90 could repro this.

[lexs]

This blog post might describe what's happening: http://steveliles.github.io/android_ssl_certificate_not_trusted.html

[lexs]

Also this: https://crosswalk-project.org/jira/browse/XWALK-937

[javamonn]

Adding in my case here: Similar situation as OP, https URL failing with [TypeError: Network request failed] on Android, successful on iOS, certificate showing as valid in browser.

In my case, had SSL setup on nginx with Let's Encrypt but left out the intermediate certificates, i.e. I was using the cert.pem instead of fullchain.pem. This thread has some more info. Once I got the intermediate cert configured correctly, Android/OkHttp accepted it.

[ericmasiello]

I'm having a similar issue but mine isn't even related to SSL. I'm just trying to run the example fetch from the RN docs calling out to http://facebook.github.io/react-native/movies.json. When I try it out on the simulator its fine. But when I plug in my device and and deploy it to that using react-native run-android it can't seem to successfully load the data.

fetch('http://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        //works fine in simulator
        this.setState({title: responseJson.title})
      })
      .catch((error) => {
        //hits this everytime on the actual device
        console.error(error);
      });

Any suggestions?

[ilyago]

+1

[ilyago]

fix dont use fullchain.pem

use
SSLCertificateFile /etc/letsencrypt/live/$DOMAIN/cert.pem
SSLCertificateKeyFile /etc/letsencrypt/live/$DOMAIN/privkey.pem
SSLCertificateChainFile /etc/letsencrypt/live/$DOMAIN/chain.pem

[DmitryMaksakov]

@ilyago, could you please provide some more info about fix? Where we shouldn't use fullchain.pem and should those three lines you wrote?

[DmitryMaksakov]

Maybe my experience will be helpful for someone: Stack Overflow
You should use Android SDK Platform version 23 on emulator.

[deehuey]

^ What's the solution to htis? Your stack overflow link is dead. Can't seem to get it working...

[arundev-kv]

@ericmasiello same here. Is it fixed?

[ericmasiello]

@arundev-kv I wish I could remember. It’s been 2 years. Sorry I can’t be of more help.

[deehuey]

@arundev-kv we had to chain our keys. I also can't exactly remember the steps we took, but it was quite simple, we just cat'd the 2 or 3 keys into a file and voilà.

https://community.letsencrypt.org/t/solved-why-isnt-my-certificate-trusted/2479