THE BITESITE BLOG
Reactnativeallwoarbitraryloads

React Native fetch only working with localhost and NOT IP addresses

coding software

Alright, this will be a quick one. So I was using 'fetch' to make a web request in my React Native app. My server was a Rails app. When I used 'localhost' in my request, the request would work perfectly, but if I used my IP address, the network request would fail.

fetch('localhost:3000')   /* this would work fine */
fetch('192.168.1.41:3000')    /* this would not work */

I double-checked to make sure my Rails server wasn't the issue and ensured it was bound to 0.0.0.0

rails s -b 0.0.0.0

So that was good. In fact, if I went into my iOS simulator and launched Safari, Safari could hit the localhost:3000 and IP Address:3000 no problem. So my iOS Simulator could hit my Rails app, but not my React Native app using the IP Address. Again, everything worked fine using localhost.

Turns out this is an iOS 9 issue where by default, HTTP requests are blocked (vs HTTPS requests). So to allow this you need to enable "Allow Arbitrary Loads" in your Info.plist in your XCode project.

For more details, check out this link https://facebook.github.io/react-native/docs/running-on-device-ios.html#app-transport-security

Caseyli
Casey Li
CEO & Founder, BiteSite