Vue.js如何使用axios跨域访问数据
2017-11-16| 程成| 4053| 2| Vue.js

最近接受另外一个项目,这个项目没有使用之前设置代理跨域方法,使用了vue2.0新增的axios方法。下面附上如何使用axios设置跨域访问数据。


跳转地址:vue.js实现接口跨域请求,解决No 'Access-Control-Allow-Origin' 问题(设置代理方法)




一、安装axios



使用axios,当然需要先安装它。执行 cnpm install axios

安装qs,执行cnpm install qs





二、客户端配置



引入并且配置axios


image.png



image.png



image.png





三、服务器端配置



调用接口添加如下代码:

header('Access-Control-Allow-Origin:*');

header('Access-Control-Allow-Methods:GET,POST,PATCH,PUT,OPTIONS');




四、axios跨域方法封装



image.png



image.png




image.png






五、封装过后的跨域调用



1、在main.js引入这个文件,我文件名字叫做“fetch.js”


image.png



2、在需要调用的地方,执行如下方法


1)get方法这样调用:


this.$fetch(url).then((res) {


//代码


});



2)post方法这样调用:


this.$post(url).then((res) {


//代码


});



3)patch方法这样调用:


this.$patch(url).then((res) {


//代码


});



4)put方法这样调用:


this.$put(url).then((res) {


//代码


});



例子下载地址:http://pan.baidu.com/s/1qXDA7VI,        密码:uzwz

例子代码没有是提供给大家参考修改的,不一定能跑起来。


通过以上配置可以完成axios跨域访问数据问题。




×
作者:程成
QQ:492245711