Vue使用Proxy代理后仍无法生效的解决
vue.js配置了前端代理却未能生效
记录一下最近踩得小坑：
配置完代理后请一定重新执行（重要，非常重要！）
npmrundev
若重新执行命令后，代理仍为生效，请按下方步骤进行检查：
检查index.js文件中的代理是否配置正确，示例如下：
proxyTable:{
'/api':{//代理标识
target:'http://xxx.xxx.xxx',//指向的实际地址
changeOrigin:true,//允许跨域
pathRewrite:{
//标识替换
//原请求地址为/api/getData将'/api'替换''时，
//代理后的请求地址为：http://xxx.xxx.xxx/getData
//若替换为'/other',则代理后的请求地址为http://xxx.xxx.xxx/other/getData
'^/api':''
}
}
},
检查请求路径是否正确,以上方所配置的代理为例
//请确认原请求中是否包含代理标识符
//请确认接口http://xxx.xxx.xxx/getData直接访问是否正常
this.$axios.get('/api/getData').then((r)=>{
console.log(r)
})
补充知识：vue使用proxyTable设置接口代理
1、修改config/index.js里proxyTable
proxyTable:{
'/api':{
target:'http://192.168.42.182:8080',
changeOrigin:true,
pathRewrite:{
'^/api':'/'
}
},
}
2、修改config/dev.env.js
module.exports=merge(prodEnv,{
NODE_ENV:'"development"',
API:'"/api"'//加入这一句
})
3、设置axios的baseUrl
exportdefault{
get(url,params){
returnaxios({
method:'get',
baseURL:process.env.API,//修改这里
url,
params,
timeout:100000
}).then((response)=>{
returncheckStatus(response)
}).then((res)=>{
returncheckCode(res)
})
}
}
4、重启服务器npmrundev就好啦~
以上这篇Vue使用Proxy代理后仍无法生效的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。