React Native Post Request via Fetch throws Network Request Failed

Question

I've came across the following error. At the moment I developing an Android App with React Native therefore I'm planning to use fetch for doing a post request for me.

fetch("https://XXreachable-domainXX.de/api/test", {
    method: "post",

    body: JSON.stringify({
      param: 'param',
      param1: 'param',

    })
  })
  .then((response) = > response.json())
  .then((responseData) = > {
    ToastAndroid.show(
      "Response Body -> " + JSON.stringify(responseData.message), ToastAndroid.SHORT
    )
  })
  .catch((error) = > {
    console.warn(error);
  });

The app now throws an error:

TypeError: Network request failed

When I change the code to a GET-Request it's working fine, in the browser with a window.alert() as a return it's cool and also the Chrome extension Postman returns data correctly.

If someone has this problem on iOS, make sure you are using https not just http. The default settings are only to support https. — wuliwong, Aug 30 '16 at 21:48
You need to approve domains in `info.plist`. http://stackoverflow.com/questions/38418998/react-native-fetch-network-request-failed — nicholas, Nov 02 '16 at 02:12
Please refer foillowing link: https://github.com/facebook/react-native/issues/5222#issuecomment-170239302 — sachin1, Jan 09 '16 at 15:58
Even if one is not online a red screen saying Network request failed not looks good, is there a way to handle that in own way like a alert or something.. — akaMahesh, May 01 '18 at 05:47

score 15 · Answer 1 · answered Nov 08 '16 at 16:23

Developing with Windows OS/PHP built-in server/react-native Android on device:

check server local IP address (ipconfig), e.g. 172.16.0.10
in react-native fetch use this URL and proper port (fetch('http://172.16.0.10:8000/api/foo))
run PHP built-in server with this specific IP instead of the localhost: php -S 172.16.0.10:8000 ...
turn off Windows firewall for the private networks

That fixed the connection problem between Android phone and the local server for me.

Just switching out `localhost` for my local IP did the trick, maybe a bug parsing `localhost`? — xHocquet, Oct 11 '17 at 18:19

Antonio · Accepted Answer · 2017-01-27T17:36:54.010

This React Native's error is rather useless, so you need to get the actual underlying error first. The most straightforward way is to write a small native program that would just perform the same query using HttpsURLConnection.

For me the actual error was java.security.cert.CertPathValidatorException: Trust anchor for certification path not found. which has a well known solution: https://developer.android.com/training/articles/security-ssl.html#MissingCa

This is quite likely your case also, given that the browsers and Postman have no problem with the request. To check it run openssl s_client -connect XXreachable-domainXX.de:443 -showcerts. If there are certificate errors, fix them first, it could spare you time writing the native program.

Edit: actually the easiest way to see all underlying android errors for react native is simply running 'adb logcat' in terminal

score 13 · Answer 3 · edited Jun 14 '22 at 15:15

13

None of the other answers helped me. The problem was headers:

Old header:

fetch(API_HOST, {
                method: 'POST',
                headers: {
                    Accept: 'application/json'
                },
                body: JSON.stringify(data),

Updated header:

fetch(config.API_HOST, {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json'  // I added this line
                },
                body: JSON.stringify(data),

edited Jun 14 '22 at 15:15

Eric Aya

69,473
35
181
253

answered Aug 07 '20 at 22:11

Arash Younesi

1,671
1
14
23

Had the same problem. This solved it! Thanks – Costin Feb 16 '21 at 14:52
Amazing, catch... you have saved my day. Thanks! nice work. – Mohammad nabil May 02 '21 at 10:49

score 6 · Answer 4 · answered Oct 26 '17 at 20:26

6

If you have had this error and you are sure everything works well and you are running an emulator, simply close your emulator and fire it up again.

It should run now.

This usually happens after you have hibernated your system for a while

answered Oct 26 '17 at 20:26

Stephen King

71
2
4

score 2 · Answer 5 · answered May 11 '20 at 10:45

2

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

// add this line ... step2> Delete all debug folder from your android folder..

answered May 11 '20 at 10:45

devkrkanhaiya

93
1
7

As of API level 28, this defaults to false. If you want to use HTTP (not HTTPS), you need to set this to true. Helped me -- thanks! – Deco Aug 18 '22 at 14:58

score 0 · Answer 6 · answered Jul 12 '17 at 06:59

I had a major issue doing the same on the android emulator. On iOS approving the domain in the info.plist was necessary. To be clear I was attempting to login to my .NET web hosted API.

The fix was to make sure the post data was parameterised.( I'm pretty sure that's a word)

export const loginUser = ({ userName, password }) => {
const data = `UserName=${userName}&Password=${password}&grant_type=password`
    return (dispatch) => {
        dispatch({ type: LOGIN_USER })

        fetch(URL_LOGIN, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: data
            // body: {

            //     UserName: userName,
            //     Password: password,
            //     grant_type: 'password'

            // }

        })
            .then((response) => { 
                loginUserSuccess(dispatch, response)
            })
            .catch((response) => {
                loginUserFailed(dispatch, response)
            })
    };
};

score 0 · Answer 7 · answered Dec 08 '17 at 08:16

0

If you run into this problem on emulator make sure you also test it on the device. It's most probably not happening there.

Just so you know there's nothing to worry about if you can work around it.

answered Dec 08 '17 at 08:16

iuliu.net

6,666
6
46
69

score 0 · Answer 8 · answered Dec 08 '17 at 20:21

I had this problem on Android due to an expired certificate. The error message I had was com.android.org.bouncycastle.jce.exception.ExtCertPathValidatorException: Could not validate certificate: Certificate expired at Fri Sep 29 16:33:39 EDT 2017 (compared to Fri Dec 08 14:10:58 EST 2017).

I was able to confirm this using digicert.com.

Unfortunately I did have to dig rather deep into the React Native code and debug the XHR code in the bundle (index.android.bundle) in order to find the error message and the URL in question, because it was in some of my logging code, which I obviously didn't log to the console as well. :)

I was helped by this GitHub issue comment.

score 0 · Answer 9 · edited Jun 22 '22 at 06:18

0

My issue was fixed when I restarted the emulator

edited Jun 22 '22 at 06:18

Ryan M

18,333
31
67
74

answered Jun 14 '22 at 12:13

AMAL MOHAN N

1,416
2
14
26

score 0 · Answer 10 · edited Aug 24 '22 at 13:30

I had same issue using the fetch,this is a type error.so try using Axios. This worked for me.

the code which wasnt working :error:[typeError : network Request failed]

return fetch(addProduceApi, { method: 'PATCH', body: bodyParamData, headers: getAuthHeader() })
.then((response: any) => response.json()) .catch((error: any) => console.log('Error in patchProduce: ', error));

the working code:

return axios.patch(addProduceApi,produceData,{ headers: getAuthHeader()}) 

.then((response: any) => response.json()) .catch((error: any) => console.log('Error in patchProduce: ', error));?

score -4 · Answer 11 · answered Oct 23 '17 at 09:04

-4

Check two cases bellow

Wrong end-point
Internet connection: both real-device, virtual-device

It has eaten 2 hour with the second reason.

answered Oct 23 '17 at 09:04

Tuan Nguyen

2,542
19
29

7

That should rather be a comment. This is **not** an answer to the question. – GhostCat Oct 23 '17 at 09:31
thats not an answer – Akshay Joshi Mar 18 '21 at 11:24

React Native Post Request via Fetch throws Network Request Failed

11 Answers11

Linked