vue中整合使用axios 以及qs解决跨域问题
我在学vue时与后台交互一直是使用vue-resource,但是在做项目时一起的老哥告诉我说vue-resource已经不维护了,并且vue的作者也推荐使用axios,于是就都换成了axios,其实用法都差不多,只是vue-resource能直接导入,但是axios需要另外一个vue专门为axios整合的包‘vue-axios’。一、在vue中整合使用axiox首先我在下面都是使用npm以及v..
我在学vue时与后台交互一直是使用vue-resource,但是在做项目时一起的老哥告诉我说vue-resource已经不维护了,并且vue的作者也推荐使用axios,于是就都换成了axios,其实用法都差不多,只是vue-resource能直接导入,但是axios需要另外一个vue专门为axios整合的包‘vue-axios’。
一、在vue中整合使用axiox
首先我在下面都是使用npm以及vue-cli指令,所以在使用下面命令时需要安装node.js以及vue-cli。
-
axios的安装
使用npm,在vue项目的控制台打下命令,安装axios并将其添加进项目依赖:$ npm install axios --save
具体使用方法和其他的安装方法可以从此链接查看:Axios中文使用说明
-
在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)
-
使用时的注意点
在vue项目中要使用axios不出问题还有两个要注意点,是我自己在用时踩到的坑。- “main.js”文件中不能同时导入
vue-resource
,虽然单独使用它们两个谁都行,但是不能一起使用,否则会产生冲突导致不能使用。 - 在项目的组件中使用axios时在前面要加上
this.
关键字,表明是vue自身提供的方法,而不是自己创建的方法。
- “main.js”文件中不能同时导入
二、使用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踩到的坑以及自己的解决办法,欢迎指正与学习交流,谢谢。
更多推荐
所有评论(0)