React-native: [iOS] Network request failed on device

[PierBover]

I'm using RN 0.29.0 and Fetch to authenticate with a server and getting the Network request failed.

I was getting it on the Simulator but I saw there are many issues with Fetch and El Capitan iOS simulator such as this one.

Now I'm building for the device and getting the same error.

Obviously, when building for release I can't see the error on Chrome but the code doesn't work.

When using Chrome dev tools I see this:

TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror (http://192.168.100.102.xip.io:8081/index.ios.bundle?platform=ios&dev=true&minify=false:24332:8)
    at XMLHttpRequest.dispatchEvent (http://192.168.100.102.xip.io:8081/index.ios.bundle?platform=ios&dev=true&minify=false:9864:15)
    at XMLHttpRequest.setReadyState (http://192.168.100.102.xip.io:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25778:6)
    at XMLHttpRequest.__didCompleteResponse (http://192.168.100.102.xip.io:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25636:6)
    at http://192.168.100.102.xip.io:8081/index.ios.bundle?platform=ios&dev=true&minify=false:25711:52
    at RCTDeviceEventEmitter.emit (http://192.168.100.102.xip.io:8081/index.ios.bundle?platform=ios&dev=true&minify=false:9095:23)
    at MessageQueue.__callFunction (http://192.168.100.102.xip.io:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7183:23)
    at http://192.168.100.102.xip.io:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7087:8
    at guard (http://192.168.100.102.xip.io:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7035:1)
    at MessageQueue.callFunctionReturnFlushedQueue (http://192.168.100.102.xip.io:8081/index.ios.bundle?platform=ios&dev=true&minify=false:7086:1)

This is the relevant code:

        fetch(url, {
            method: 'POST',
            body: 'username='+username+'&password='+password,
            headers: {
                'Accept': 'application/json',
                "Content-Type": "application/x-www-form-urlencoded",
            }
        }).then((response)=>{
            ...
        },(error)=>{
            console.log(error.message)
        }).catch((error)=>{
            console.log(error)
        })

I thought maybe it was some configuration problem when preparing the files for production but the docs are outdated and do not correspond with the reality.

[ide]

It's not clear from your code but make sure that url is HTTPS, or turn off ATS the same way as any other iOS app in case that is the issue.

[PierBover]

Thanks @ide.

I will close this for now then, since it seems it's expected behaviour.

[niros001]

I got the same error using RN 0.42.3 and REST API

[fadookie]

@niros001 Please see the note I added to the bottom of the "Using fetch" section of the networking docs: https://facebook.github.io/react-native/docs/network.html#using-fetch :

By default, iOS will block any request that's not encrypted using SSL. If you need to fetch from a cleartext URL (one that begins with http) you will first need to add an App Transport Security exception. If you know ahead of time what domains you will need access to, it is more secure to add exceptions just for those domains; if the domains are not known until runtime you can disable ATS completely. Note however that from January 2017, Apple's App Store review will require reasonable justification for disabling ATS. See Apple's documentation for more information.

[niranjan-b-prajapati]

@fadookie I am on react-native 0.34.1 and using fetch for making api calls, also the server url used in the app is having HTTPS in it i.e. its encrypted using SSL. But still i get these network request failed error.

I have also added following in the info.plist file:

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>com</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
            <key>xxx.yyyyy.com</key>
            <dict>
                <key>NSIncludesSubdomains</key>
                <true/>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
                <key>NSTemporaryExceptionMinimumTLSVersion</key>
                <string>TLSv1.1</string>
            </dict>
            <key>localhost</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

In above mentioned code the "xxx.yyyyy.com" is our api url without the https://www mentioned in it.

Still i am facing the issue of network request failed.
Please let me know if anything else needs to be done in code.
Also need to ask we have 2 different servers one for testing another for production do i need to mention both in info.plist as both of them are https servers.

Also i am facing issue on android too. weird thing is its not consistent it occurs randomly in any api calls at any point of time.

[nooralahzadeh]

@niranjan-b-prajapati Hi, did you find solution ? I have same problem as you!

[niranjan-b-prajapati]

@nooralahzadeh no luck right now upgrading my project to react-native 0.44 and restructuring it again. Lets see if upgrading solves the issue.Will comment soon as i check for the issue in 0.44

[nooralahzadeh]

@niranjan-b-prajapati , Hi, Thanks, Restructuring it works for me!

[Arshiamidos]

checkout my answer
it helped my freind also

10404