本机iOS模拟器网络连接

Question

我正在尝试在我的react-native应用程序中获取()一些数据并且它失败了.因此,我发现NetInfo和我在应用程序启动时使用它,并在onRegionChangeComplete使用iOS模拟器的每个MapView 事件(如果重要的是,iPhone5s和iPhone 6)上使用它,并且unknown每次都返回NetInfo返回的状态.MapView工作正常,我可以在模拟器上使用Safari浏览网页.我发现与fetch()失败有关的最常见问题是开发人员在其url中使用localhost.我正在使用http://api.openweathermap.org/data/2.5/weather？作为我的网址,所以我相信这是一个模拟器问题.我没有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请求.这没有给我任何改变.

更新:我已将问题缩小到网址.如果我在react-native中使用fetch,使用此url http://api.openweathermap.org/data/2.5/weather?APPID=MYAPPKEY&lat=35&lon=139与MYAPPKEY等于我的密钥,则会失败.如果我在浏览器中使用相同的URL,它将返回我期待的json.

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

还有一个有趣的注意事项 - 如果我在浏览器中输入openweathermap网址,地址栏会在返回json时删除http://部分.当我在浏览器中输入github地址时,地址栏会保留https://.

另一个有趣的注意事项 - 如果我使用非https网址,则会失败.

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