React Native Post Request via Fetch throws Network Request Failed

arnebr picture arnebr · Jan 2, 2016 · Viewed 44.6k times · Source

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.

Answer

mp31415 picture mp31415 · Nov 8, 2016

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.