解决vue-axios的post请求跨域问题

Author Avatar
Mr-houzi 2月 26, 2018
  • 在其它设备中阅读本文章

最近在学习vue,在vue中没有ajax,而是利用vue-resource和vue-axios进行数据通信。Vue2.0之后,官方推荐使用vue-axios。

问题

在使用vue-axios的post请求时出现跨域问题。报错如下:

1
2
3
4
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:8081' is therefore not allowed access.
The response had HTTP status code 404.

解决

步骤

config/index.js里添加proxyTable代理方法

1
2
3
4
5
6
7
8
9
proxyTable: {
'/api': {
target: 'http://api.com/',
changeOrigin: true,
pathRewrite: {
'^/api': '/vue'
}
}
}

target为目标地址

pathRewrite下为重定向地址(正常情况下为空即可)

完整地址为http://api.com/vue

然后在组件中请求如下:

1
2
3
4
5
6
7
8
9
10
11
created(){
axios.post('/api/Login', {
data: 'data'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}

结果则是向http://api.com/vue/Login地址发送请求

特别声明

设置proxyTable代理方法后,需要注释掉引入在main.js设置的baseUrl,不然proxyTable无效,依然出现跨域报错。(这个非常重要,困惑了自己好久)

1
2
3
4
//main.js
// axios.defaults.baseURL = 'http://api.com/';//设置proxyTable代理解决跨域问题后注释掉baseURL
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

PS:vue-resource解决跨域问题同vue-axios一样设置proxyTable代理方法,不过不需要特别声明中的内容了。