Fetch call without a Content-Type throws a "Network request failed" error on Android

[laurent22]

Description

On Android, the following code used to work in React Native 0.61:

const url = 'https://example.com/remote.php/webdav/';

const options = {
	"body": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<d:propfind xmlns:d=\"DAV:\">\n<d:prop xmlns:oc=\"http://owncloud.org/ns\">\n<d:getlastmodified/><d:resourcetype/>\n</d:prop>\n</d:propfind>",
	"headers":
		{
			"Authorization": "Basic XXXXXXXXXXXXXXXX",
			"Content-Length": "190",
			"Depth": 0,
			"If-None-Match": "JoplinIgnore-89439",
			"User-Agent": "Joplin/1.0"
		},
	"maxRetry": 0,
	"method": "PROPFIND",
	"timeout": 120000,
};

try {
	const response = await fetch(url, options);
	console.info('RESPONSE', response);
} catch (error) {
	console.error(error);
}

But with React Native 0.62 and 0.63 (tested both) it gives the dreaded:

TypeError: Network request failed

The above code can be fixed by setting the content type in the header, so by adding this line it works again:

"Content-Type": "text/xml",

So I think there are three issues:

1. All other frameworks and libraries I've tried support the above call without having to set the Content-Type, and React Native also used to work, so something was changed that makes it mess with the Content-Type. Maybe it "intelligently" detects the type and actually sends garbage in one way or another.

2. If React Native requires a Content-Type for some reason, it should send back a friendly error message such as "Please set the Content-Type" instead of the generic impossible-to-debug "Network request failed".

3. Any such non-standard fetch behaviour should be documented.

React Native version:

System:
    OS: Windows 10 10.0.19041
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 1.60 GB / 15.85 GB
  Binaries:
    Node: 14.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.17.3 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 23, 25, 26, 27, 28, 29
      Build Tools: 27.0.3, 28.0.2, 28.0.3, 29.0.2, 29.0.3, 30.0.2
      System Images: android-27 | Google Play Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom
      Android NDK: 21.3.6528147
    Windows SDK: Not Found
  IDEs:
    Android Studio: Version  4.0.0.0 AI-193.6911.18.40.6626763
    Visual Studio: 16.1.29102.190 (Visual Studio Community�2019)
  Languages:
    Java: 1.8.0_262 - C:\Program Files\OpenJDK\openjdk-8u262-b10\bin\javac.EXE
    Python: 2.7.18 - C:\Python27\python.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.3 => 0.63.3
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Run the above code, or any PROPFIND fetch call without a Content-Type header.

Expected Results

That the http call succeed like it did for several years.

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

See above code

[peternoordijk]

I have the same problem here, only on Android by the way. I created a whole new project with npx react-native init AwesomeProject and replaced App.js with the following:

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, Text, View } from 'react-native';

export default App = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://reqres.in/api/users', {
      method: 'POST',
      headers: {
        // Enabling the next line will solve the error, but it shouldn't make a difference
        // 'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        "name": "morpheus",
        "job": "leader"
      })
    })
      .then(response => response.text())
      .then(dat => setData(dat))
      .catch(error => setData(error.message))
      .finally(() => setLoading(false));
  }, []);

  return (
    <View style={{ flex: 1, padding: 24 }}>
      {isLoading ? <ActivityIndicator /> : <Text>{data}</Text>}
    </View>
  );
};

It's failing very consistently.

react-native: 0.63.3
FLIPPER_VERSION=0.54.0

[laurent22]

@peternoordijk, so have you tried setting the content-type? As it's commented out in your code.

[peternoordijk]

@laurent22 exactly, it will work with the content type enabled, but it shouldn't make a difference like you said

[ghost]

Not working app crash directly, Also I have add to Content-Type and Accept but still not working...
'Accept': 'application/json',
'Content-Type': 'multipart/form-data'
in Manifest.xml
android:usesCleartextTraffic="true"

please help... any solutions

[peternoordijk]

@devang-p-eq do you have an error message and a stack trace? Or some code to reproduce the crash with?

[ghost]

[Sat Oct 24 2020 15:18:30.828] LOG error [TypeError: Network request failed]

getting msg in terminal

and added network security files also in manifest android file
ios working fine

version in my app
"react": "^17.0.1",
"react-native": "^0.63.3",

[danielgdfr]

I am making http requests with the fetch function and it works correctly in debug environment but when I compile the apk in release mode the fetch function does not work in versions higher than android 10, I used an android 7 physical device and it works without problems.

the react native version is 0.63
android 10 emulator: not working
android 10 physical device: not working
android 7 device: works

[danielgdfr]

I am making http requests with the fetch function and it works correctly in debug environment but when I compile the apk in release mode the fetch function does not work in versions higher than android 10, I used an android 7 physical device and it works without problems.

the react native version is 0.63
android 10 emulator: not working
android 10 physical device: not working
android 7 device: works

solve my problem by adding these lines in my manifest.xml file
<manifest
...
xmlns:tools="http://schemas.android.com/tools">
<application
...
android:usesCleartextTraffic="true" tools:targetApi="28"
...>
...

[ghost]

Thanks for the reply
Its http request issues in my project when I have add http lib then problem solved

Thanks to all

[Naturalclar]

The fetch library used in react-native has been upgraded in 0.63 which is probably causing this issue JakeChampion/fetch#823

My workaround was to explicitly set content-type when I run fetch()

[priyeshshah11]

Is this ever going to be fixed? This bug has been there for a long time now (in several GitHub issues) and still there doesn't seem to be a good fix/solution for it. Have already tried most of the workarounds/suggestions etc but still not working on Android, iOS works fine.

[Jayesh-Mahato]

I am facing the same problem even with adding Content-Type in the call as explained here: https://stackoverflow.com/questions/67751230/why-is-fetch-query-always-returning-error-segment/

Any suggestions.

[ariccio]

What is this wizardry? It just fixed my problem.

[nomanali630]

i am facing this issue while i login in my expo app from android emulator but if i login from my mobile it allow me to login
here is the error i am getting { Network request failed
at node_modules\whatwg-fetch\dist\fetch.umd.js:535:17 in setTimeout$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:123:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:379:16 in callTimers
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:414:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:113:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:365:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:4 in callFunctionReturnFlushedQueue}

[flyskywhy]

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

[GrzegorzSzwed]

Hi, did anyone find some solution for it? I cannot sleep because of that. When I use postman for api requests everything works fine, when I switch to android emulator it shows me this message.

[ghost]

@GrzegorzSzwed
hope the below solution worked for you!
#30176 (comment)

[GrzegorzSzwed]

Hi @devang-p-eq! Thank you for the reply but I am using SSL :/

The problem is quite interesting because in the browser it works too.

[Aaronphy]

http lib

Could you show more details about the http lib?

[GrzegorzSzwed]

Hello everyone,

I discovered that the problem can also be reproduced in postman. When I changed the request setting in postman Enable SSL certificate verification to OFF, the server responds: 200OK.

However, it still does not respond when this setting is set to ON.

Then I see the error: unable to verify the first certificate.

I think this error indicates the same problem as Network request failed, but it is more accurate. When the certificate is public, I just need to get the correct certificate from the server administrators.

Maybe if facebook split the error into more accurate ones it would help?

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.

[pinkasey]

this issue is still relevant.