关闭

React Native Network Request Failed解决方案

标签: reactnativefetch
9558人阅读 评论(1) 收藏 举报
分类:

今天在用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 不能正常使用的解决办法

0
0
查看评论

有关react-native POST请求造成Network request failed解决方法

当Android端,我们在POST请求时 componentWillMount(){       var body = {"id": 1};        fetch("http://xxx&quo...
  • Wen_dy
  • Wen_dy
  • 2016-04-06 16:38
  • 8211

解决react native使用fetch函数在ios9报network request failed的问题

大坑,上网绕了一大圈找了n久,最后找到解决方法那个兴高采烈。或许是由于我从事前端没开发过ios,有些配置不明白。这里写下来作为参考,也希望能帮到其他人。
  • liyijun4114
  • liyijun4114
  • 2016-06-30 17:40
  • 5740

【问题处理】Mac上React Native的fetch请求报错Network request failed解决办法

报错  Network request failed  Unhandled JS Exception: Network request failed    原因  毕竟是在iOS的模拟器上运行的,iOS9以后,iOS网络请求要求用https协...
  • u011439689
  • u011439689
  • 2017-03-14 17:55
  • 1820

Network Request Failed

在react native项目中,有时候调用接口会出现这样的错误提示:“Network Request Failed”。 一.模拟器上报“Network Request Failed”解决办法,也是官网有提到的: 1. 在Info.plist中添加NSAppTransportSecuri...
  • xiaojun_zxj
  • xiaojun_zxj
  • 2017-06-23 11:19
  • 667

rn出现network request failed

参考链接:http://blog.csdn.net/wanghy_ios/article/details/49421727
  • mqy1023
  • mqy1023
  • 2017-03-02 14:54
  • 626

RN--TypeError:Network request failed

RN0.28之后,iOS新建的项目,拉取数据请求会出现 TypeError:Network request failed 的错误提示。原因是苹果要求所有接口都需要支持ATS协议,即用https访问,RN0.28后Xcode的info.plist对http的支持需要手动设置,即需要添加 NSAppT...
  • chevins
  • chevins
  • 2016-06-27 19:11
  • 1384

react native fect network request failed

TypeError: Network request failed 点击打开链接
  • ddovetlose
  • ddovetlose
  • 2016-08-11 20:19
  • 801

ReactNativeiOS(三)开发零碎1 Fetch错误Network request failed

开发状态下,如果网络不通,或者 api 无效,都会给出一个大红屏幕,写着Network request failed 这个是开发状态的,实际release的产品不会,但还是要处理掉这些异常,红色屏幕对开发也是不友好的 对于ES6不熟,只好查资料,https://github.com/facebo...
  • oiken
  • oiken
  • 2015-12-27 17:38
  • 6227

react native下fetch ios9报network request failed的问题

环境: RN: 0.28 iOS: 9 xcode: 7.0.1 现象: 执行以下语句时: fetch('http://facebook.github.io/react-native/movies.json') .then((response) =&g...
  • yuan882696yan
  • yuan882696yan
  • 2016-07-26 13:47
  • 609

react native常见的错误

更多组件:https://react.parts/native,调用系统的,注意查看:支持IOS or 安卓   组件和相关使用 样式用这种方式定义,可以单独提出来成一个文件。 1.引入外部样式: var Style = require('./Sty...
  • GoodChangYong
  • GoodChangYong
  • 2016-05-05 16:16
  • 7827
    个人资料
    • 访问:52185次
    • 积分:749
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:0篇
    • 译文:0篇
    • 评论:8条
    文章分类
    最新评论