Vue-axios跨域请求详解理解

在构建web项目的时候，我们难免会采用前后端分离的架构去进行项目，那么问题来了，在前端代码没有和后端打包时，我们如何获取数据，测试数据，这里就要运用到跨域了，本文介绍vue项目中的跨域方法。

在vue项目中我们通常使用Axios来进行数据请求，Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中,而vue所构建的项目也算基于npm来构建，因此让我们先来安装一下Axios。

进入到vue项目下,执行下面这行指令
npm install --save axios

这样axios就自动添加到我们的项目依赖里面了。然后我们打开项目。执行以下过程：

1、首先进入main.js,第一步当然是导入我们的axios文件了，然后定义一个变量挂载到Vue原型

2、第二步需要注意一下，我们需要修改config目录下的index.js文件，改成下图所示：

3、接下来就是使用过程了:

4、最后大家看一看豆瓣API返回的数据:

最后说一下有几点需要注意

1.Vue.prototype.HOME中的HOME是一个固定值，默认指向localhost，如果我们修改成为别的变量，会报错，比如修改成Vue.prototype.API，系统会报错，因为地址不对。那如果我们想自定义怎么办，很简单，Vue挂载变量需要加个dollar符,你改成Vue.prototype.$api就OK了。

2.第二点是特别需要注意的地方，我曾经坑过自己好几次，希望大家着重看一下。在Vue项目中如果我们修改了config里面的文件，请千万要重新启动项目，重新启动项目，重新启动项目，不然一定会报错。