一、本文简述
今天我将和大家分享一个利用axios获取新冠肺炎数据的案例，并在此基础上向大家介绍处理跨域请求的简单方法。
二、Axios简介
Axios是一个基于 promise 的 HTTP 库，可以在浏览器和 node.js中使用。简单的说这个库的功能与golang或者python里提供的http库的功能类似，但可以在浏览器里运行。所以说，我们可以利用Axios获取一些数据，并在浏览器端进行渲染。
当然原生的NodeJs也提供了类似的功能，如jquery等库也能帮助用户实现数据获取功能。
三、实现
项目的设计思路非常简单，我们首先在网上找到一个能够获取新冠肺炎数据的API接口，再利用Axios获取数据，为可视化工作做好铺垫就可以了。
首先来搭建框架，命令为：
vue init webpack axios_example_1紧接着，我们在该项目中安装Axios库，命令为：
npm install axios --save至此，一个Vue+Axios的脚手架就搭建完毕了。在此基础上，在src文件夹下新建comm目录，在comm目录下创建js文件夹，在js目录下新建datasource.js文件。主要的数据获取代码就放在这个datasource文件中。项目目录如下所示：
脚手架搭建完毕了，现在在datasource.js中实现具体的业务逻辑。这个文件的主要功能是向API发起一个请求，并获取数据。
本文在此，向大家介绍一个非常偷懒的代码生成方法——利用Postman生成http请求。Postman是非常好用的网络测试工具，可以跨平台使用，并且Postman提供了代码生成功能。
例如，现在访问网址https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5，就可以得到一组数据。
利用Postman也可以得到类似数据。
大家可以看到图片右上角有一个“Code”按钮。点击该按钮可以生成该请求对应的代码。
我们挑选需要的语言或工具，生成对应的代码，现在把代码拷贝到datasource.js文件中即可。
至此，项目的主体已经构建完毕，现在在HelloWorld.vue中引入外部的js文件（datasource.js）。
运行代码，命令如下：
npm run dev如果能够成功执行，我们会在控制台里看到输出的疫情数据。可是我们打开firefox浏览器，会在浏览器控制台中发现如下错误：
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
如果使用Google浏览器，控制台会出现如下错误：
Access to XMLHttpRequest at ‘https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5’ from origin ‘http://127.0.0.1:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
这个错误就是跨域请求错误，下面我们来介绍处理该问题的方法。
四、处理跨域请求处理方法
跨域问题是在构建跨系统页面应用时经常会出现的问题。有兴趣的同学可以看看这篇文章——跨域踩坑经验总结。
接下来，我介绍具体的处理方法，简单说就是设置一层代理。
针对Vue+Webpack环境，我们可以在config文件下找到index.js文件设置代理。具体代码如下所示：
通过上述设置，我们将网页链接
https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5绑定到了“/V1”路径下。
接着我们返回datasource.js文件，将原先的url修改成“/V1”。
再次运行项目npm run dev，打开浏览器访问http://127.0.0.1:8080/或者http://127.0.0.1:8080/v1/。
效果如下：
至此，我们已经解决了跨域请求。
五、小结
本文主要介绍了Axios获取数据的方法，并简单介绍了跨域请求的处理方式。本文主要使用的知识点包括Vue引用外部js文件、Vue代理设置等。除此之外，Vue组件间的数据传递方式并未在本文中有所体现，我会在后续文章中对相关知识进行进一步介绍。
如果您对本文有所疑问或需要原始代码，可以在下方留言。
