一、Vue Cli 2
proxyTable
// 配置好后一定要关闭原来的server,重新npm run dev启动项目。不然无效。
proxyTable: {
// 用‘/api’开头,代理所有请求到目标服务器
'/api': {
target: 'http:xxx.com', // 目标接口域名
changeOrigin: true, // 是否启用跨域
pathRewrite: { //
'^/api': ''
}
}
vue的转发机制(proxyTable),proxyTable代理功能可以实现转发机制(通过修改config里面修改index.js文件)。
注意: ‘/api’ 为匹配项,target 为被请求的地址,因为在 ajax 的 url 中加了前缀 ‘/api’,而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 ‘/api’ 转为 ‘/’。如果本身的接口地址就有 ‘/api’ 这种通用前缀,就可以把 pathRewrite 删掉。
二、Vue Cli 3
devServer.proxy
直接在config.js里修改
# string
module.exports = {
devServer:{
host: 'localhost',//target host
port: 8080,
//proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
proxy:{
'/api':{
target: 'http://192.168.1.30:8085',//代理地址也就是服务器地址,这里设置的地址会代替axios中设置的baseURL
changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
secure:false, // 使用的是http协议则设置为false,https协议则设置为true
//ws: true, // proxy websockets
//pathRewrite方法重写url
pathRewrite: {
'^/api': '/'
//pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.30:8085/xxxx
//pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.30:8085/api/xxxx
// 设置之后虽然浏览器看到的请求还是 localhost/xxxx,但是实际上已经转到http://192.168.1.30:8085/xxxx上了
// 如果只是修改域名,则不需要写pathRewrite
}
}}
},
}
注意:配置proxy之后, axios 的 baseURL 也要做相应的修改。
统一代理,赋值为字符串(/api),与proxy里配置的要对应。
axios.defaults.baseURL = '/api'