react-native iOS 模拟器网络连接

Question

我正在尝试在我的 react-native 应用程序中 fetch() 一些数据，但它失败了。所以，我找到了 NetInfo，我在应用程序启动时和每个 MapView 上使用它 onRegionChangeComplete事件使用 iOS 模拟器(如果重要，iPhone5s 和 iPhone 6)，NetInfo 返回的状态为 unknown每次。 MapView 工作正常，我可以在模拟器上使用 Safari 浏览网络。我发现与 fetch() 失败相关的最常见问题是开发人员在其 url 中使用 localhost。我正在使用 http://api.openweathermap.org/data/2.5/weather ?作为我的网址，所以我相信这是一个模拟器问题。我没有要测试的 iOS 设备，而且 MapView 尚不可用于 android，因此我无法在 android 上进行测试。有人能指出我正确的方向吗？

谢谢你。

附注。我记录到控制台的获取错误是 - TypeError: Network request failed
这是我的代码:

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);
    })
}

第二次更新:除了下面的更新和信息，我已经将其缩小到这是一个 iOS 模拟器问题。我在 Android 设备上没有同样的问题。再次 - 模拟器出现问题的唯一时间是使用 http: url 发出 fetch() 请求。当我使用 https: url 时，模拟器很高兴。我还在模拟器中找到了一些 DEV 设置以允许 http 请求。这没有给我带来任何改变。

更新:我已将问题缩小到网址。如果我在 react-native 中使用 fetch，使用这个 url http://api.openweathermap.org/data/2.5/weather?APPID=MYAPPKEY&lat=35&lon=139 MYAPPKEY 等于我的 key ，它失败了。如果我在浏览器中使用相同的 url，它会返回我期望的 json。

另外，如果我在 react-native 中使用 fetch 并使用这个 url https://api.github.com/users/mralexgray/repos ，我没有得到 Network request failed ，我得到有效的 json。

一个更有趣的说明 - 如果我在浏览器中输入 openweathermap url，地址栏会在返回 json 时去掉 http://部分。当我在浏览器中输入github地址时，地址栏保留了https://。

另一个有趣的注意事项 - 如果我使用非 https url，它会失败。

Answer 1

如果您使用的是 react-native@0.28 或更高版本，则在 Plist.Info 中删除了以下内容:

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

并添加了以下内容:

<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>

这与 iOS 中的 ATS 有关，请查看以下链接以获取更多信息。
https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/
您基本上需要将您使用的 http 域添加到 plist.Info