react-native iOS Simulator Network Connection

Question

I'm trying to fetch() some data in my react-native app and it's failing. So, I found NetInfo and I am using it when the app starts and on each MapView onRegionChangeComplete event using the iOS simulator (if it matters, iPhone5s and iPhone 6), and the status returned by NetInfo is unknown every time. The MapView works fine and I can navigate the web using Safari on the simulators. The most common issue I've found related to fetch() failing is from developers using localhost in their url. I'm using http://api.openweathermap.org/data/2.5/weather? as my url, so I'm confident this is a simulator issue. I don't have a iOS device to test on and MapView isn't available for android yet, so I can't test on android. Can someone point me in the right direction as to why?

Thank you.

PS. The fetch error I'm logging to console is - TypeError: Network request failed

Here is my code:

module.exports = function(latitude, longitude) {


  var rootURL = 'http://api.openweathermap.org/data/2.5/weather?APPID=MYAPIKEY&lat=35&lon=139';
  console.log(rootURL);

  return fetch(rootURL) // fetch is part of react or react-native, no need to import
    .then(function(response){ // method chaining used here
      // Shorthand to check for an HTTP 2xx response status.
      // See https://fetch.spec.whatwg.org/#dom-response-ok
      if (response.ok) {
        console.log('Response from fetch was ok, returning response to next then');
        return response
      } else {
      // Raise an exception to reject the promise and trigger the outer .catch() handler.
      // By default, an error response status (4xx, 5xx) does NOT cause the promise to reject!
      console.log('Throwing error to .catch with statusText: ' + response.statusText);
      throw Error(response.statusText);
    }

    })
    .then(function(response) {
      console.log('Returning JSON to next then')
      return response.json();
    })
    .then(function(json) { // chain a second function when JSON is returned
      console.log('Returning this json to Api call in index.os.js' + json);
      return {
        city: json.name,
        //temperature: kelvinToF(json.main.temp),
        //decription: json.weather[0].description
      }
    })
    .catch(function (error) {
      console.log('My fetch Error: ' + error + 'Specific error: ' + error.message);
    })
}

2nd UPDATE: In addition to the updates and information below, I've narrowed it down to this being an iOS simulator issue. I don't have the same problem on an Android device. Again - the only time the simulator has an issue is making a fetch() request using a http: url. When I use a https: url, the simulator is happy. I also found some DEV setting in the simulator to allow http requests. This gave me no change.

UPDATE: I've narrowed the problem down to the url. If I use fetch within react-native, with this url http://api.openweathermap.org/data/2.5/weather?APPID=MYAPPKEY&lat=35&lon=139 with MYAPPKEY equaling my key, it fails. If I use the same url in my browser, it returns the json I am expecting.

Also, if I use fetch within react-native and use this url https://api.github.com/users/mralexgray/repos , I don't get the Network request failed, I get valid json.

One more interesting note - if I enter the openweathermap url in my browser, the address bar strips off the http:// part when it returns json. When I enter the github address in my browser, the address bar keeps the https://.

Another interesting note - if I use a non-https url, it fails.

Answer 1

If you are using [email protected] or higher, in the Plist.Info the following was removed:

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

And this was added :

<key>NSLocationWhenInUseUsageDescription</key>
<string></string>
<key>NSAppTransportSecurity</key>
<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

This is related to the ATS in iOS, look at the following link for more info. https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ You basically need to add the http domains that you use to the plist.Info