- 将目标服务器代理到本机开发服务端口,可用于跨域调用数据接口
- 优先取用项目中存在的资源
参考文档
webpack-dev-server
vue-cli-dev-server
配置
vue.config.js
- 单一代理配置
module.exports = {
devServer: {
proxy: 'http://apiHost'
}
}
- 多代理配置
module.exports = {
devServer: {
proxy: {
// 请求前缀
'/api': {
// 代理目标地址
target: 'http://apiHost',
// 调用代理地址/api/xxx时,将默认将请求转发到http://apiHost/api/xxx
// 使用路径重写配置,正则表达式匹配起始的/api字符串替换为空字符串'',则将请求转发到http://apiHost/xxx
pathRewrite: {'^/api':''},
// 支持websocket
ws: true,
// 默认值为true,修改请求头中host值为代理目标地址,值为false时,host值为开发服务器地址
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}