TypeError: Network request failed On Android

[keyz23]

Hi Everyone, I found this problem on my React-Native Android App.
When I using a fetch to communicate with a working api, this type of error is returned to me.

TypeError: Network request failed

I Used the Chrome debbuger and I found this:

TypeError: Network request failed at XMLHttpRequest.xhr.onerror (whatwg-fetch.js:504) at XMLHttpRequest.dispatchEvent (event-target.js:172) at XMLHttpRequest.setReadyState (XMLHttpRequest.js:580) at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:394) at XMLHttpRequest.js:507 at RCTDeviceEventEmitter.emit (EventEmitter.js:181) at MessageQueue.__callFunction (MessageQueue.js:366) at MessageQueue.js:106 at MessageQueue.__guard (MessageQueue.js:314) at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:105)

This is the code that I used:

`static creaUtente(identity, FirstName, LastName, FiscalCode , Email) {
let formdata = new FormData();
formdata.append('Identity', identity);
formdata.append('FirstName', FirstName);
formdata.append('LastName', LastName);
formdata.append('FiscalCode', FiscalCode);
formdata.append('Email', Email);

    console.log(Configuration.base_url.rest + Configuration.apiRoutes.signUp)
    console.log(formdata)

    return new Promise((resolve, reject)=> {
        fetch('https://linktotheapi.com',{
            method: 'POST',
            headers: {
                'Content-Type': 'multipart/form-data',
            },
            body: formdata
        })
        .then((response) => response.json())
        .then((responseData) => {
            if(responseData.Error){
                Alert.alert("Errore");
            }
            global.utente = responseData;
            resolve(responseData)
        })
        .catch((err) => {reject(err)})
    })
}`

I manually tried to use the API and it works. So the problem is fetch.
I have seen and read that a lot have encountered this problem on android without a real solution.

The API link is a link type: https: //****.com (it is not a localhost).
I tried to use the http version of the API but the error still appears.

Now, This is my package.json

dependencies": { "@react-native-community/async-storage": "^1.4.2", "buffer": "^5.2.1", "pouchdb-adapter-asyncstorage": "^6.4.1", "pouchdb-authentication": "^1.1.3", "pouchdb-find": "^7.0.0", "pouchdb-react-native": "^6.4.1", "react": "16.8.3", "react-native": "0.59.4", "react-native-ble-manager": "^6.6.2", "react-native-ble-plx": "^1.0.3", "react-native-json-tree": "^1.2.0", "react-native-keyboard-aware-scroll-view": "^0.8.0", "react-native-router-flux": "^4.0.6", "react-native-tab-navigator": "^0.3.4", "react-native-vector-icons": "^6.4.2" }, "devDependencies": { "@babel/core": "7.4.3", "@babel/runtime": "7.4.3", "babel-jest": "24.7.1", "jest": "24.7.1", "metro-react-native-babel-preset": "0.53.1", "react-test-renderer": "16.8.3" }, "jest": { "preset": "react-native" } }

I have read that this problem is on Android Device ( I obviously added internet permissions in the Manifest file ). Do you know nothing about this problem??

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[lucky-newbie]

did you solve it? i met too...

[keyz23]

No I haven't solve it...

[keyz23]

Nobody?

[Valiums]

hey @keyz23 @823844596,
I recently encountered something similar using fetch and formDatas (only on Android though).
The workaround that worked for me was to use XMLHttpRequest instead of fetch.
Hopefully this will help you too!

I don't know if you are using expo but for me this problem started when I updated my expo SDK from 31 to 33 (so RN 0.57.1 to 0.59.8)

[amohit1315]

Was anyone able to solve it??
I am facing similar issue with fetch. I have to use common code for android and iOS. fetch works great in iOS but in android throws error.

Trying to fetch data from remote server via api.
Using fetch(https:url:port) to fetch the data. But every time android emulator as well as physical device gives network request failed. While I can access same url within browser of emulator.

I have already went through various links, and many people have posted same problem but none of them had ample solution that works. While some people were not able to access localhost via api-call but it was resolved using IP address of system. But in my scenario I am trying to access remote host. Also domain name cannot be used in my scenario, so need a solution using (ip) in fetch method=get.

testlogin = https://10.209.7.115:8080/api/v1/
Basicauth = 'Basic cm9vdDpyb290'

fetch(testingLogin, {
method: "GET",
cache: "no-cache",
mode: "cors",
withCredentials: true,
credentials: "include",
headers: {
'Authorization':Basicauth,
Accept: "application/json",
"Content-Type": "application/json"
}
}).then(response =>
{
if(response.status === 200)
{
this.props.navigation.navigate('Home');
}
else
{
alert("Authorization failed");
}
})
.catch(error => {
alert("Request Failed :Check the ip address Entered:Problem with server ");
throw(error);

   })

Error:

TypeError: Network request failed
onerror@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:24051:31
dispatchEvent@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:28695:31
setReadyState@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:28448:33
__didCompleteResponse@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:28275:29
emit@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:3280:42
__callFunction@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:2577:49
http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:2334:31
__guard@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:2531:15
callFunctionReturnFlushedQueue@http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:2333:21

[garrinmf]

@keyz23 you closed the ticket, but did you find a fix for it?

[IcebergRage]

@keyz23 @garrinmf do you find a solution ?

[garrinmf]

@IcebergRage, I got past this, forgot I'd commented anywhere though and it's a bit fuzzy now.

I believe in my case it was failing when I only had the header for Content-Type: "multipart/form-data" as that was enough to make it work on iOS. But, on Android, I also had to specify that I wanted JSON back with the header Accept: "application/json". Simply specified both and 💥.

[ailton-moreira]

I have the same issue. Did any one was able to solve it?

[CYBERNEURONES]

Why this issue is not fix ?

[Dantalion]

Same issue. Still no fix?

[daybreaker]

We're having the same issue here but on iOS. Using rn 0.53. It was working fine a while ago.

The weird thing is if I have RN Debugger open, our code works. But with remote debugging turned off, everything with fetch returns a Network Request Failed error.

I know that when RN Debugger is open, RN uses V8 to run the code, and when remote debugging is off, it uses the device/simulator's native JavaScriptCore... I wonder if the most recent version of iOS has an updated version of JavaScriptCore that implements fetch differently from V8?

I'm not educated enough in the internals of javascript engines to get much further than this, though.

Any help would be appreciated.

[DodoTheDeveloper]

Dear fellow developers, please check out my comment on the similar issue #24394 . I hope it will help some of you.

[Lpaydat]

I solved it but I'm not sure is it the same issue with you guys.

In my case, I used expo (in an android device) together with relay-modern and this error occurs when I try to fetch data from my server (localhost).

After spending an hour to find the solution with no results I just find out the source of my error.
It is the fetch url (I used localhost and it works in the browser so I just forgot about it).
When I change the url to the correct ip address, this issue have gone.

I hope this helps and sorry for my bad English.

[EzeRangel]

This is a problem with the cert. Your server should use intermediate certificates so Android should not reject the requests.

[Papyrus0120]

issue is not fixed then y its closed

[alanhalpern06]

I have the same problem here, the most curious thing is that this error just happen when it's a POST request, on my GET requests it's is working well.
Somebody have any ideia?

On postMan my request Workswell too!

My code:

NetInfo.fetch().then(isConnected => {
            if(isConnected) {
                var url = "http://vvendas.com/api/home";
                var data = new FormData();                    
                data.append('dateBegin', dateBegin);
                data.append('dateEnd', dateEnd);
                data.append('format', 'json');
                fetch(url, {
                    method:'POST',
                    headers:{
                        'Accept': 'application/json', 
                        'Content-Type': 'application/json',
                        'Authorization': "Bearer "+ userToken
                      },
                    mode:"cors",
                    body: data,
                    redirect: 'follow'
                }).then(response => response.json())
                .then(resJSON => {

                    console.log('It WORKS',resJSON)
                }).catch(err => {
                     console.log(err)                  
                })
            }else{
                console.log('not Connected')
            }
        })

The terminal result :
LOG [TypeError: Network request failed]

The Chrome Debbug (ctrol+m -> Debug) :
TypeError: Network request failed at XMLHttpRequest.xhr.onerror (index.bundle?platfor…&minify=false:26748) at XMLHttpRequest.dispatchEvent (index.bundle?platfor…&minify=false:32302) at XMLHttpRequest.setReadyState (index.bundle?platfor…&minify=false:31386) at XMLHttpRequest.__didCompleteResponse (index.bundle?platfor…&minify=false:31213) at index.bundle?platfor…&minify=false:31323 at RCTDeviceEventEmitter.emit (index.bundle?platfor…e&minify=false:3316) at MessageQueue.__callFunction (index.bundle?platfor…e&minify=false:2648) at index.bundle?platfor…e&minify=false:2361 at MessageQueue.__guard (index.bundle?platfor…e&minify=false:2602) at MessageQueue.callFunctionReturnFlushedQueue (index.bundle?platfor…e&minify=false:2360)

[ThalesCrisostomo]

Anything about that?

[alessiocancian]

Had a similar problem after upgrading react native, the only way I was able to solve it is using RNFetchBlob, as shown here: https://stackoverflow.com/a/50061209/5724186

[Baterka]

I have same problem on RN 0.62 :( Working fine in release but in debug very annoying!

[dotfelixb]

Add this to your manifest

<application
    ...
    android:usesCleartextTraffic="true"
    ...>
    ...
</application>

[devkrkanhaiya]

step1>
add android:usesCleartextTraffic="true" line in AndroidManifest.xml like:

<application
...
android:usesCleartextTraffic="true"> // add this line
...

step2>
Delete all debug folder from your android folder..

[petrosmm]

Based on this code

react-native/ReactAndroid/src/main/java/com/facebook/react/modules/network/NetworkingModule.java

Line 383 in 476a336

} else if (data.hasKey(REQUEST_BODY_KEY_STRING)) {

any request without headers content-type and payload body as string will start failing into "Network request failed." this is because the high-level wrappers are handing the Request Error call as "Network request failed." but is not even reaching the internet.

    try {
      sendRequestInternal(
          method,
          url,
          requestId,
          headers,
          data,
          responseType,
          useIncrementalUpdates,
          timeout,
          withCredentials);
    } catch (Throwable th) {
      FLog.e(TAG, "Failed to send url request: " + url, th);
      ResponseUtil.onRequestError(getEventEmitter(), requestId, th.getMessage(), th);
    }
  }

1. sendRequestInternal

else if (data.hasKey(REQUEST_BODY_KEY_STRING)) {
      if (contentType == null) {
        ResponseUtil.onRequestError(
            eventEmitter, requestId, "Payload is set but no content-type header specified", null);
        return;
      }

For posterity, I got it to work on the following:
I am certain the above was important, if not, absolutely correct. In my case it did not affect the outcome. My scenario was the following: fresh RN TS project 0.62.2, Android 4.4, Https (secure) request,
and Emulator mode (debug). I kept seeing "Network request field".
I was able to get this to work on Genymotion emulator for 4.4 with Google Playstore (NEEDED -- from opengapps.org) and this piece of code. Here is my sample code:

function getTestRequest() {
  const headers = new Headers();
  headers.append('Content-Type', 'application/json');
  headers.append('Accept', 'application/json');

  const configInit: RequestInit = {
    method: 'GET',
    // headers: headers
  };

  const url = 'https://www.csattv.org/menu.json'
    ?? 'https://jsonplaceholder.typicode.com/todos/1';

  fetch(url)
    .then(res => {
      console.log('\r\n res', res, '\r\n');
      return res.json();
    }).then(data => {
      console.log(data);
      return data;
    }).catch(p => {
      console.warn(p);
      return;
    });
}

[infinitbility]

Solve HTTP and HTTPS Network request failed issue in react native fetch

https://infinitbility.com/network-request-failed-in-react-native-fetch

[Hel5ing]

Dear fellow developers, please check out my comment on the similar issue #24394 . I hope it will help some of you.

hey man,you are awesome!!

[joe105598055]

If you are developing on mac and using wifi. Must remember add DNS (e.g. 8.8.8.8). It works for me.

[alekseiaksenov]

It's July-2021, and the problem has never been solved?

[laurent22]

I think the core issue is the terrible error message. I mean it's a simply an HTTP request, it's plain text, so surely it's possible to get a proper error message from the underlying lib? eg "Missing header", "Invalid content type", etc.

When a user of my app sees a "Network request failed" I can only tell them there's pretty much no way to know what the error is. They have to randomly try every config variations on their server until it works. That's not how it should be in 2021 - HTTP requests are well understood, and it should be possible to surface a proper error message when something happens.

[lorecast]

Solve HTTP and HTTPS Network request failed issue in react native fetch

https://infinitbility.com/network-request-failed-in-react-native-fetch

Thanks, it's work for me

[coldshine]

I had the similar issue.
I was setting incorrect type in FormData object: it was image instead of image/jpeg or image/png or image/whatever.
My code was:

const formData = new FormData();
formData.append('image', {
  uri: imageUri,
  name: 'someName',
  type: 'image'
});

And the working one:

const uriParts = imageUri.split('.');
const fileType = uriParts[uriParts.length - 1];

const formData = new FormData();
formData.append('image', {
  uri: imageUri,
  name: 'someName',
  type: `image/${fileType}`
});

[SANDEEP1938]

@IcebergRage, I got past this, forgot I'd commented anywhere though and it's a bit fuzzy now.

I believe in my case it was failing when I only had the header for Content-Type: "multipart/form-data" as that was enough to make it work on iOS. But, on Android, I also had to specify that I wanted JSON back with the header Accept: "application/json". Simply specified both and .

but this thing is not working for me

[hieuplasma]

I had fixid this problem in ubuntu and android real device. Folow these steps:

1. In terminal, press "ifconfig" and copy ipadress of device, in my case is usb0
2. Shake your device to open menu dev, choose "Dev settings" or "Settings"
3. Choose Debug server host & port fort device, press ip:8081, in my case is 192.168..:8081
4. Open terminal again, and press adb reverse tcp:3000 tcp:3000
5. Now, you can request api with url http://localhost:3000/{params}

[nilsond]

I solved the problem with this video: https://www.youtube.com/watch?v=TNIz3P2r4rU

NOTE: This is for those who are using MAC

[LegalPlatform]

After Wasting one day finally I solve it !!

It was working on real host, but not on production environment,
So, what I did I past ipconfig command in cmd in windows.

Then I got my ip address from IPv4 Address and past it in fetch variable instead of localhost.

[tuoxiansp]

For me, it was solved in a quite simple way:

headers: {
  // ...
}

->

headers: new Headers({
  // ...
})

[sedhha]

Well to summarize it all, this definitely is not a problem with React Native. I have tested it well with all the scenarios, here are the things you might consider when you get this error:

1. Toggle between localhost and actual IP network (Very unlikely but worth a try, if you're requesting to global endpoint, then this step is not required.)
2. Make sure you're connected to Internet (In case you're using emulator, try to open a browser or something)
3. Make sure you're able to reach the endpoint with some other request client (Postman or any other HTTP client)

If you carefully examine above three, you would automatically find out what's missing, if you do the above in order, I am very sure you should be able to sort it out. Tested it with React 0.64.3

[flyskywhy]

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

[vshy108]

For me, I appended file:// to android uri then the issue is solved while iOS does not need the append of file://

[rychel]

after this, if the problem persist don't forget disabled firewall

[samad324]

I'm still getting this error even after adding android:usesCleartextTraffic="true" in AndroidManifest.xml file.

so i added my domain name in network_security_config.xml file.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <!-- deny cleartext traffic for React Native packager ips in release -->
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">10.0.2.2</domain>
        <domain includeSubdomains="true">10.0.3.2</domain>
        <domain includeSubdomains="true">domain.com</domain>
    </domain-config>
</network-security-config>

don't forget to add android:networkSecurityConfig="@xml/network_security_config" in your AndroidManifest.xml file.

 <application
     ...
      android:usesCleartextTraffic="true"
      android:networkSecurityConfig="@xml/network_security_config"
      ... >

[vladimirevstratov]

Solve HTTP and HTTPS Network request failed issue in react native fetch

https://infinitbility.com/network-request-failed-in-react-native-fetch

In my case it was an issue with expired TLS certificate of domain, found it by checking TLS status of domain.

[SpaceSimon]

I have a "Network request failed", only on Android and only with DELETE requests, both in development and production.

The deletion works fine but the request fails so I cannot update the UI.

I have this in my headers (among other things):

Accept: "application/json; version=13.0;"
Content-Type: "application/json"

RN version is 0.63.5

[shahzaib803]

That solution worked for me .

I believe in my case it was failing when I only had the header for Content-Type: "multipart/form-data" as that was enough to make it work on iOS. But, on Android, I also had to specify that I wanted JSON back with the header Accept: "application/JSON". Simply specified both and 💥.

[fvalles]

To anyone still having this issue: I faced the same problem when trying to connect my react native app (android simulator & iOS physical device) to a local BFF.

The solution was not using the URL as http://localhost:PORT or http://127.0.01:PORT, but to use the real IPv4 IP address of my laptop which can be found on macOS navigating to: System settings -> Network -> WiFi (in my case) -> Details -> TCP/IP

[GeorgeFlorian]

This worked for me on EXPO SDK 49:
I've installed expo-build-properties using npx expo install expo-build-properties and then added it as a plugin in app.json:

    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "usesCleartextTraffic": true
          }
        }
      ]
    ]

[03balogun]

Here's how I resolved this.

The server expects multipart/form-data for file uploads, but it seems that the request is being sent with application/x-www-form-urlencoded instead. This discrepancy causes the server to reject the request on Android, it works fine on iOS.

The native error looks like this

Failed to send url request: http://redacted-host-url.com/upload
java.lang.IllegalArgumentException: multipart != application/x-www-form-urlencoded
	at okhttp3.MultipartBody$Builder.setType(MultipartBody.kt:241)
	at com.facebook.react.modules.network.NetworkingModule.constructMultipartBody(NetworkingModule.java:688)
	at com.facebook.react.modules.network.NetworkingModule.sendRequestInternal(NetworkingModule.java:442)
	at com.facebook.react.modules.network.NetworkingModule.sendRequest(NetworkingModule.java:236)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
	at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:188)
	at com.facebook.jni.NativeRunnable.run(Native Method)
	at android.os.Handler.handleCallback(Handler.java:874)
	at android.os.Handler.dispatchMessage(Handler.java:100)
	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
	at android.os.Looper.loop(Looper.java:198)
	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:228)
	at java.lang.Thread.run(Thread.java:764)

Explicitly setting the content type via the header fixed the issue.

Adding multipart/form-data to the request header fixed the issue for me.

headers: {
        'Content-Type': 'multipart/form-data'
      }

[Buddhaa97]

@03balogun worked for me. Thanks