React Native Network Request Failed解决方案

原文地址:http://blog.csdn.net/joyfixing/article/details/52535922

今天在用React Native写一个网络请求的demo时模拟器一直提示Network Request Failed,很是苦恼,百度搜索好久都没有找到我想要的答案,stackoverflow上有人说这个错误只在开发模式下出现,生产版本不会出现,但这根本没有解决问题。还有人说:如果使用fetch获取数据,用的是POST方法,注意headers要添加请求头。当请求为GET时不能用body,当为POST时必须包含body,设置头部之后就一切正常了。但我的fetch用的是GET方法不需要添加任何头,所以Network Request Failed的问题还没有解决。

为了防止代码出错,我直接复制了官方示例代码,如下

fetch('http://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson.movies);
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });

居然还不行,我直接把这段代码放到浏览器console控制台运行,发现一切正常,控制台成功输出内容。那就有可能是iOS模拟器的问题了。

既然fecth api有问题那就换用XMLHttpRequest试试看,然后控制台输出了the resource could not be loaded because the app transport security policy requires the use of a secure connection,百度搜索下才发现是iOS9引入了新特性App Transport Security (ATS)。新特性要求App内访问的网络必须使用HTTPS协议,意思是Api接口以后必须是HTTPS。但是我的项目使用的是HTTP协议,现在也不能马上改成HTTPS协议传输。

还好有替代解决方案
1. 在Info.plist中添加NSAppTransportSecurity类型Dictionary。
2. 在NSAppTransportSecurity下添加NSAllowsArbitraryLoads类型Boolean,值设为YES

具体操作可以参考这篇文档iOS9 HTTP 不能正常使用的解决办法



发表评论

邮箱地址不会被公开。