vue中整合使用axios 以及qs解决跨域问题

我在学vue时与后台交互一直是使用vue-resource，但是在做项目时一起的老哥告诉我说vue-resource已经不维护了，并且vue的作者也推荐使用axios，于是就都换成了axios，其实用法都差不多，只是vue-resource能直接导入，但是axios需要另外一个vue专门为axios整合的包‘vue-axios’。

一、在vue中整合使用axiox

首先我在下面都是使用npm以及vue-cli指令，所以在使用下面命令时需要安装node.js以及vue-cli。

1. axios的安装
   使用npm，在vue项目的控制台打下命令，安装axios并将其添加进项目依赖：

   $ npm install axios --save
   

   具体使用方法和其他的安装方法可以从此链接查看：Axios中文使用说明

2. 在vue项目中注入axios
   axios不能直接使用Vue.use()方法，需要导入专门的一个包来整合使用axios，使用npm安装‘vue-axios’包并将其添加进项目依赖：

   $ npm install vue-axios --save
   

   安装完两个包并添加进依赖以后，可以在"package.json"文件中查看到已经安装完成
   
   接下来在“main.js”文件中导入“axios”以及“vue-axios”，并且使用Vue.use()方法调用“vue-axios”，就可以在项目中直接使用axios了。

   import axios from 'axios'
   import VueAxios from 'vue-axios'
   
   Vue.use(VueAxios, axios)
   

3. 使用时的注意点
   在vue项目中要使用axios不出问题还有两个要注意点，是我自己在用时踩到的坑。

   • “main.js”文件中不能同时导入vue-resource，虽然单独使用它们两个谁都行，但是不能一起使用，否则会产生冲突导致不能使用。
   • 在项目的组件中使用axios时在前面要加上this.关键字，表明是vue自身提供的方法，而不是自己创建的方法。

二、使用qs来解决跨域问题

axios使用post方法时传输数据给后台默认为json格式，有时会导致跨域问题，如下图：

axios本质还是Ajax，而Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准。而json是一种数据交换格式，前台一般要发给后台的数据都是json格式的，但这就导致后台需要对json进行解析，而且json文件也会导致ajax的跨域问题。在vue-resource中，我使用的解决方法是使用它本身封装的方法：jsonp方法，来解决跨域问题，即通过添加script标签，通过里面的src来解决跨域问题。
而axios中则有另外一种方法，即qs，使用qs的stringify方法，可以将前端中的对象转换为字符串格式发送给后端，不仅利于解析，也能解决跨域问题。

使用qs只需要在要使用qs的组件里引入，然后直接使用它的方法即可
```
import Qs from ‘qs’;

	this.axios
			.post(url, Qs.stringfy(user))
			.then(res => {
				console.log(Qs.stringfy(user));
				console.log(res.data);
			})
			.catch(error => {
				console.log(error);
			})
```

可以看到qs.stringfy将我预先定义的对象转换成了字符串，不同字段名中间使用&隔开，并且跨域问题报错也没有了。

以上就是我在vue项目中使用axios踩到的坑以及自己的解决办法，欢迎指正与学习交流，谢谢。