React-native: IOS - fetch request from ios simulator fails

[Nosherwan]

After upgrading to el capitan my ios simulator is failing on the fetch api requests to a node.js server application that is installed on the same machine via local host. This was working fine on yosemite with react-native 11.

The jsCodeLocation variable in my AppDelegate.m file is as follows:
 jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

In my app I am using facebook sdk for facebook authentication and that bit works fine. Only after that authentication step when I make this call to my local server app do I get the error below:

return fetch('http://192.168.1.9/api/session', {
            method : 'post',
            headers: {
                'Accept'      : 'application/json',
                'Content-Type': 'application/json'
            },
            body   : JSON.stringify(objectData)
        })
            .then(result => result.json())
            .catch(error => {
                    console.log('login():Error Stack: ' + error.stack);
                }
            );

login():Error Stack: TypeError: Network request failed
    at xhr.onload (http://localhost:8081/index.ios.bundle:9654:8)
    at XMLHttpRequest._sendLoad (http://localhost:8081/index.ios.bundle:9278:1)
    at XMLHttpRequest.setReadyState (http://localhost:8081/index.ios.bundle:9268:6)
    at XMLHttpRequest._didCompleteResponse (http://localhost:8081/index.ios.bundle:9166:6)
    at http://localhost:8081/index.ios.bundle:9125:107
    at Object.ErrorUtils.applyWithGuard (http://localhost:8081/index.ios.bundle:685:12)
    at EventEmitter.emit (http://localhost:8081/index.ios.bundle:8824:12)
    at MessageQueue.__callFunction (http://localhost:8081/index.ios.bundle:3395:16)
    at http://localhost:8081/index.ios.bundle:3321:8
    at guard (http://localhost:8081/index.ios.bundle:3275:1)
    at MessageQueue.callFunctionReturnFlushedQueue (http://localhost:8081/index.ios.bundle:3320:1)
    at messageHandlers.executeJSCall (http://localhost:8081/debuggerWorker.js:25:73)
    at DedicatedWorkerGlobalScope.onmessage (http://localhost:8081/debuggerWorker.js:42:5)

I have tried localhost:8081, my machine ip instead of locahost and 127.0.0.1.
the simulator only works with localhost and 127.0.0.1 it fails with the red screen on using my local ip in jsCodeLocation. However the fetch call with all three options fail.

I have looked at this similar issue but that has not helped resolve this issue.
https://github.com/facebook/react-native/issues/3174

Any help would be appreciated.

For reference I have upgraded the following on my machine, and all these components seem to be working fine.
el capitan
node v 4.1.0, npm 3, reinstalled all node modules within the react-native project
react-native 16-rc from react-native 11
updated brew, watchman, ruby via rvm, reinstalled all cocoapods dependancies.

[facebook-github-bot]

Hey Nosherwan, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If this is a feature request or a bug that you would like to be fixed by the team, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• We welcome clear issues and PRs that are ready for in-depth discussion; thank you for your contributions!

[fabianeichinger]

This is currently an issue with iOS simulators (afaik only on El Capitan). It can't connect at all to the host machine via its network IP, even e.g. with Safari.
The way I currently handle it is: I have a config.js file, which exports the domain / IP address I want to connect to. If I want to run on a simulator I just comment out the export of the IP address and uncomment the export of localhost.

[ide]

@feichngr thanks for answering. I had heard something similar about how this behavior is part of the latest iOS dev tools.

Please open a new issue if this is specifically an issue with RN and not OS X/iOS.

[rainbowhat]

@feichngr Do you mind elaborating your point? I'm also facing the same issue with IOS simulator

[PierBover]

Yes please @feichngr how do you solve this?

[kaikcreator]

This is probably caused because the latest iOS SDK enforces connections to be under https protocol, instead of plain http.

You can add an exception to your domain in the info.plist file of the Xcode project.

something like this should work:

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>myDomain.com</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
                         ...other exceptions like localhost...
        </dict>
    </dict>

[ekryski]

or if you want to straight up allow anything you can do this:

<key>NSAppTransportSecurity</key>  
 <dict>  
      <key>NSAllowsArbitraryLoads</key><true/>  
 </dict>

Although you should probably go with @kaikcreator's solution. See this stackoverflow for more details.

[fakhrishahab]

hey, how about android?

[jqn]

@fakhrishahab android doesn't have ATS, so it should work out of the box.

[kagalenitin]

@jqn I am running into this issue on Android. OS 6.1 .. any solution would help.

[hazeeb]

when I run the application on ios simulator, I'm having this same issue even after adding 'Allow Arbitrary Loads' and Exception Domains. The app works perfectly on Android devices.
react-native:0.50.4

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>http://www.mydomain.com</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
                <key>NSExceptionDomains</key>
                <true/>
                <key>NSIncludesSubdomains</key>
                <true/>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>