react-native iOS 模拟器网络连接

Question

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

谢谢。

PS。我记录到控制台的获取错误是 - 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 请求。这让我没有零钱。

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

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

另一个有趣的注意事项 - 如果我在浏览器中输入 openweathermap url，地址栏会在 returns 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 有关，请查看以下 link 了解更多信息。 https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ 您基本上需要将您使用的 http 域添加到 plist.Info

react-native iOS 模拟器网络连接

react-native iOS Simulator Network Connection

fetch

react-native