vue中axios跨域问题

前言

兴冲冲的开始用vue封装组件、自定义指令之后,开始实战。诶,等等,貌似少了……交互?
大致研究了一下axios,但是存在以下两个问题:

  • 跨域问题
  • 数据格式问题
    跨域信息示例:
    1
    2
    3
    4
    Failed to load http://localhost:8080/login:
    Response to preflight request doesn't pass access control check:
    No 'Access-Control-Allow-Origin' header is present on the requested resource.
    Origin 'http://localhost:8080' is therefore not allowed access.

所以针对该问题给出一套解决方案(以post请求为例):

1.跨域处理

cinfig/index.js中对proxyTable做如下配置:

1
2
3
4
5
6
7
8
9
proxyTable: {
'/api': {
target: 'https://0.0.0.0:8080/login', //设置url公用部分,记得加http/https和端口号
changeOrigin: true,
pathRewrite: {
'^/api': '/' //这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
}
}
},

main.js中引入axios并作为Vue属性使用

1
2
3
import axios from 'axios'

Vue.prototype.HOST = '/api'

在调取数据组件中,axios配置如下(可以自行封装):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
getData () {
this.$axios({
method: 'post', //请求方式 一般为get\post 此处以post为例
url: this.HOST + '/login', //url
data: { //数据
loginId: '123456',
password: '123456'
},
}).then(function (res) {
console.log(res);
debugger;
}.bind(this)).catch(function (err) { //bind 绑定当前作用域
console.log(err);
debugger;
})
}

ok,保存,然后
npm run dev
咦?发生了什么?没跨域啊?数据发过去了啊?为什么服务器给我抛异常==、

1
2
3
4
5
{
code:100,
data: {},
msg: "服务器异常"
}

检查发现错误原因:数据发送时没有走formdata,接下来处理该问题。
错误示例.jpg


2.数据格式修正

formdata形式提交数据
处理方法则是在刚才配置的getData()中的this.$axios()加上一段格式化代码配置即可,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
//formdata
transformRequest: [function (data) {
let ret = '';
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
}
return ret
}],
//头信息
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}

注:说明

步骤2 formdata形式提交数据,可直接解决跨域问题,不用执行步骤1
完整axiospost配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
getData () {
this.$axios({
method: 'post', //请求方式 一般为get\post 此处以post为例
url: 'http://localhost:8080/login',
data: { //数据
loginId: '123456',
password: '123456'
},
transformRequest: [function (data) {
let ret = '';
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function (res) {
console.log(res);
debugger;
}.bind(this)).catch(function (err) {
console.log(err);
debugger;
})
}

继续测试:保存之后npm run dev格式化成功.jpg
完美~~,接下来看返回数据:
成功状态.png


ok,解决方案到此结束,希望对大家有所帮助。继续快乐的采坑吧各位~

---本文结束感谢您的阅读---

本文标题:vue中axios跨域问题

文章作者:Lomo 朱幸民

发布时间:2019年02月24日 - 19:08:57

最后更新:2019年07月10日 - 08:45:48

原始链接:https://www.zhuxingmin.com/2019/02/24/vue中axios跨域问题/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

请作者喝杯咖啡吧~
0%