解决React Native使用Fetch API请求网络报Network request failed

学到React Native的网络请求，在官方文档中看到可以使用Fetch API请求网络：

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

为了学习使用，我用Charles抓取了网易新闻首页的数据，得到请求地址：http://c.m.163.com/recommend/getSubDocPic?tid=T1348647909107&from=toutiao&offset=0&size=10&fn=1&prog=LMA1&passport=&devId=r99dBKmBNYeXaXWt9DyoVBdTCxlMJ0G82d7aeKvL9W9TdKiqocj0eExU0s49fzqe&lat=&lon=&version=20.1&net=wifi&ts=1486440421&sign=d%2BUOGE2rnh9%2FJLHprKQ7ZfmRnjDomdjgoN3hbvoS%2FvN48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=netease_gw&mac=racUMC0A9havm%2BHe6jH3YAvVdjgSXYDtwEDZ03eH1l8%3D&open=&openpath=

得到请求地址就非常兴奋的去请求数据，但是现实很残忍，出异常了：

请求网络异常.png

这时候，我确定这个请求地址是没问题的，因为我用postman试了一遍：

postman中请求成功.png

这时候我想是Fetch API的问题吗？所以此时我再用豆瓣的提供的api试一下：https://api.douban.com/v2/book/1220562，：

fetch("https://api.douban.com/v2/book/1220562")
    .then((response) => response.json())
    .then((responseData) => {
        console.log(responseData);
    })

结果请求成功了：

Fetch API请求豆瓣API成功.png

所以可以得出结论也不是Fetch API的问题。

最后只能在网上各种找答案，最后发现了关于ios9中https请求的问题，需要配置info.plist，具体步骤为：

• 在Info.plist中添加 NSAppTransportSecurity 类型 Dictionary ;
• 在 NSAppTransportSecurity 下添加 NSAllowsArbitraryLoads 类型Boolean ,值设为 YES;

所以用xCode打开，ios工程，找到info.plist配置（这里也体现了跨平台开发用mac会比较方便）：

info.plist配置.png

至此，问题解决。

---

个人公众号（icemanFE）：分享更多的前端技术和生活感悟

个人公众号.png