您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　7.1.1 代理功能访问API

　　我们利用create-react-app创建一个新的应用，名叫weather_react，读者可以在本书对应Github代码库https://github.com/mocheng/react-and-redux的chapter-07目录下找到完整代码。

　　首先我们要确定访问什么样的API能够获得天气信息，中国天气网提供的RESTful API中有访问一个城市当前天气情况的API，规格如表7-1所示。

　　表7-1 中国天气网获取城市天气API规格

　　根据这样的API规格，如果要访问北京的天气情况，先确定北京的城市编号是101010100，用GET方法访问http://www.weather.com.cn/data/cityinfo/101010100.html，就能够得到类似下面的JSON格式结果：

　　{

　　"weatherinfo":{

　　"city":"北京",

　　"cityid":"101010100",

　　"temp1":"-2℃",

　　"temp2":"16℃",

　　"weather":"晴",

　　"img1":"n0.gif",

　　"img2":"d0.gif",

　　"ptime":"18:00"

　　}

　　}

　　但是，我们的网页应用中不能够直接访问中国天气网的这个API，因为从我们本地的网页访问weather.com.cn域名下的网络资源属于跨域访问，而中国天气网的API并不支持跨域访问，所以在我们的应用中如果直接像下面那样使用fetch访问这个API资源，肯定无法获得我们预期的JSON格式结果：

　　fetch(http://www.weather.com.cn/data/cityinfo/101010100.html)

　　解决跨域访问API的一个方式就是通过代理（Proxy），让我们的网页应用访问所属域名下的一个服务器API接口，这个服务器接口做的工作就是把这个请求转发给另一个域名下的API，拿到结果之后再转交给发起请求的浏览器网页应用，只是一个“代理”工作。

　　因为对于跨域访问API的限制是针对浏览器的行为，服务器对任何域名下的API的访问不受限制，所以这样的代理工作可以成功实现对跨域资源的访问。

　　在本地开发的时候，网页应用的域名是localhost，对应的服务器域名也是localhost，所以要在localhost服务器上建立一个代理。好在create-react-app创造的应用已经具备了代理功能，所以并不用花费时间来开发一个代理服务。

　　在weather_react应用的根目录package.json中添加如下一行：

　　"proxy": "http://www.weather.com.cn/",

　　这一行配置告诉weather_react应用，当接收到不是要求本地资源的HTTP请求时，这个HTTP请求的协议和域名部分替换为http://www.weather.com.cn/转手发出去，并将收到的结果返还给浏览器，这样就实现了代理功能。

　　例如，假如服务器收到了一个网页发来的http://localhost/data/cityinfo/101010100.html的请求，就会发送一个请求到http://www.weather.com.cn/data/cityinfo/101010100.html，并把这个请求结果返回给网页。

　　至此，我们就准备好了一个API。

　　提示

　　create-react-app生成应用的proxy功能只是方便开发，在实际的生产环境中，使用这个proxy功能就不合适了，应该要开发出自己的代理服务器来满足生产环境的需要。 深入浅出React和Redux