vue+webpake proxyTable跨域问题完美解决

如果是前后端分离的项目,本地开发环境需要访问接口,或者在调试时直接访问线上的接口,这时候就会有接口跨域的问题(生产环境不存在跨域问题)。以vue-cli生成的项目为例,需要配置 config/index.js 中的 proxyTable 属性。

方法一

1
2
3
4
5
6
7
8
9
10
11
12
/* 亲测只适合dev环境,且每个接口前要加上‘/api’ */

proxyTable: {
'/api': {
target: 'http://example.com', // 接口的域名
// secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
pathRewrite: {
'^/api': ''
}
}
}

方法二

1
2
3
4
5
6
/* 亲测完美解决跨域方案 */

proxyTable:[{
path: '/',
target: 'http://example.com', // 接口的域名
}],
海盗船长 wechat
扫码关注我的公众号哟
0%