HTTP Fetch fails with "TypeError: Network request failed" => Resolved

[raffaeler]

Description

There are 83 issues opened and unanswered about network requests failing with this generic error.
The main causes of the pain are:

1. Not getting an answer from the team
2. The exception is far too generic and does not suggest the origin of the problem

Problem description

Using fetch to get/post on a HTTPS web server which is using a valid and trusted but not public CA.

• Using Chrome and other apps the requests are always successful and without certificate problems

Sample code in react native:

static async Post(): Promise<string> {
    let srv = "my.domain.com";
    let port = 5101;
    let device = "abcd";
    let url = `https://${srv}:${port}/Do/Something?devicename=${device}`;

    try {
        let response = await fetch(url, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-type':'application/json'
            },
            body: JSON.stringify({
                key: 'value',
            })
        });

        if(response.status !== 200) throw new Error(`Can't open  ${srv} for ${device} with status ${response.status}`);
        return response.json();
    }
    catch(e) {
        console.log(e);
        throw(e);
    }
}

Solution

Due to Android restrictions, a network_security_config configuration must be added to the application. It is an xml file that can be added by following these steps:

1. Edit the android/app/src/main/AndroidManifest.xml
2. Add the android:networkSecurityConfig="@xml/network_security_config" to the <application /> tag
3. Create the folder android/app/src/main/res/xml and inside a file called network_security_config.xml
4. If you don't want to install the CA in the Android certificates, add the folder android/app/src/main/res/raw

Variant 1: using the certificates added manually to Android.

In this case the CA must be visible in the User Certificates in the Android Settings. Try using them by opening a website that uses those certificates in Chrome to verify they are valid and correctly installed.

Content of the network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config>
        <!-- Localhost config is NEEDED from react-native for the bundling to work  -->
        <domain-config cleartextTrafficPermitted="true">
            <domain includeSubdomains="true">127.0.0.1</domain>
            <domain includeSubdomains="true">10.0.0.1</domain>
            <domain includeSubdomains="true">localhost</domain>
        </domain-config>

        <domain includeSubdomains="true">my.domain.com</domain>
        <trust-anchors>
            <certificates src="user"/>
            <certificates src="system"/>
        </trust-anchors>
    </domain-config>
</network-security-config>

The <certificates src="user"/> is the one giving access to the certificates installed manually.

Variant 2: using a certificate bundled with the app

You should export (using ssl) a pem certificate containing just the public key, naming it "ca" (no extension). Copy the certificate in the raw folder

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config>
        <!-- Localhost config is NEEDED from react-native for the bundling to work  -->
        <domain-config cleartextTrafficPermitted="true">
            <domain includeSubdomains="true">127.0.0.1</domain>
            <domain includeSubdomains="true">10.0.0.1</domain>
            <domain includeSubdomains="true">localhost</domain>
        </domain-config>

        <domain includeSubdomains="true">my.domain.com</domain>
        <trust-anchors>
            <certificates src="@raw/ca"/>
            <certificates src="system"/>
        </trust-anchors>
    </domain-config>
</network-security-config>

Important note (added on June 22, 2022)

The local traffic (with the packager) must be unencrypted. For this reason the <domain-config /> must contain the clearTrafficPermitted=true.
It is also important adding the ip addresses used from react-native when debugging otherwise the application will crash because of the android:networkSecurityConfig="@xml/network_security_config" attribute. If you see the app crashing, take not of the ip used internally from react native and add it/them to this list. For example:

<domain-config cleartextTrafficPermitted="true">
            <domain includeSubdomains="true">127.0.0.1</domain>
            <domain includeSubdomains="true">10.0.0.1</domain>
            <domain includeSubdomains="true">10.0.1.1</domain>
            <domain includeSubdomains="true">10.0.2.2</domain>
            <domain includeSubdomains="true">localhost</domain>
        </domain-config>

Requested fix: please never throw exceptions with a generic message, they are only a huge pain.

Version

0.67.0

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: Windows 10 10.0.19044
CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
Memory: 8.20 GB / 31.93 GB
Binaries:
Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 8.1.3 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 19, 23, 25, 26, 27, 28, 29, 30
Build Tools: 19.1.0, 21.1.2, 22.0.1, 23.0.1, 23.0.3, 26.0.2, 27.0.0, 28.0.0, 28.0.3, 29.0.2, 30.0.2
System Images: android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom
Android NDK: 22.1.7171670
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions: 10.0.10586.0, 10.0.14393.0, 10.0.15063.0, 10.0.16299.0, 10.0.17134.0, 10.0.17763.0, 10.0.18362.0, 10.0.19041.0
IDEs:
Android Studio: Version 2020.3.0.0 AI-203.7717.56.2031.7935034
Visual Studio: 17.1.32104.313 (Visual Studio Enterprise 2022), 16.11.32002.261 (Visual Studio Enterprise 2019)
Languages:
Java: 1.8.0_302
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.66.4 => 0.66.4
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Use the above code to make an HTTPS request to a website protected with certificates that are not public.
They will not succeed with a generic exception (as for the issue title)

Repeat the request to a public website and it will succeed.
The issue is the exception being too generic.

Snack, code example, screenshot, or link to a repository

No response

[ariccio]

It looks like the underlying okhttp library has quite good error detection and reporting. Somehow though, either the react-native networking layer, or the whatwg-fetch doesn't capture that!

[raffaeler]

It is an habit in this repo to ignore important issues (not only this one) for a very long time.
I start believing RN is not that worthy to invest in.

[hoaxvo16]

I have same issue and solve by doing this, you can try

#24627 (comment)

[raffaeler]

Thank you @hoaxvo16 but I already posted the solution in this thread.
My request is react-native providing a decent error so that nobody else has to spend hours in trying to resolve it.
Also, since this an OSS project, it would be nice for some of the owner to "say something" instead of infinite silence.

[hoaxvo16]

@raffaeler yeah i know, took me over 3 hours to solve this, good thing is you learned something new :D

[amalmohann]

My issue was fixed when I restarted the emulator

[Stephnn0]

I am still having the same issue! im trying to connect my react native app to django. i am using JWT. im trying to send a post method to my api but I get "TypeError: Network request failed" => Resolved every time i press the sign in button. i am using a real android device. im new to react so it is been very hard to solve this problem! can anybody help me pls? i already try all methods above but none seem to work

[flyskywhy]

fixed TypeError: Network request failed when upload file to http not https with Android debug builds

[nelsonprsousa]

I have this problem connecting with my hosted API (with a valid SSL certificate from Let's Encrypt) on Android Level 21 (Android 5), 22 (Android 5.1), 23 (Android 6) and 24 (Android 7).

After trying both variant 1 and 2 without success, I gave up and removed support for these Android versions (represent like 5% of market share to this day).

No idea what's happening, the error doesn't help 😞

[raffaeler]

@nelsonprsousa if the certificate on the API side is publicly verifiable, you should not have this issue at all.
My issue was about telling Android+React Native how to trust a private CA.

1. double check that your cerificate is correctly deployed by browsing the API from a browser (I assume it is)
2. verify the internal android error using adb logcat

[nelsonprsousa]

@nelsonprsousa if the certificate on the API side is publicly verifiable, you should not have this issue at all. My issue was about telling Android+React Native how to trust a private CA.

1. double check that your cerificate is correctly deployed by browsing the API from a browser (I assume it is)
2. verify the internal android error using adb logcat

Here's my API (checking on Desktop Chrome):

I am assuming it is publicly verifiable.

However, on those Android versions (from API 22 to API 24), I have the "Network request failed" error.

I noticed that trying to directly open the website on Chrome on those old Android versions brings this error, it should be related:

Certificate viewer:

So yeah, something weird on old Android version validating certificates?!

[raffaeler]

@nelsonprsousa if this behavior happens only on older Android version, it is possible that the CA used by letsencrypt was not already available on those versions.
If you scroll in the mobile Chrome app, you should see some hint about the CA not being trusted or another error like that

[nelsonprsousa]

@nelsonprsousa if this behavior happens only on older Android version, it is possible that the CA used by letsencrypt was not already available on those versions. If you scroll in the mobile Chrome app, you should see some hint about the CA not being trusted or another error like that

yeap.. I was reading on Google and there are some problems with letsencrypt and old Android versions that I don't fully understood.

Do you think that the solution you gave of bundling the certificate will solve this problem (already tried without success), or it is something else and I just hijacked this discussion? 😅