代理
需求现在是前端vue运行在nodejs上,假设端口8080,java运行在tomcat上,假设端口80(可省略),现在需要前端请求后端数据,因为不在同一个服务器上,端口不同,ajax不能直接访问。
解决方式:
例如现在要访问java的web/SelectUserById
vue+node.js目录结构
新建代理文件
命名为vue.config.js
内容如下:
module.exports={
devServer:{
proxy:{
'/web':{
target:'http://localhost/vueTomcat/web',
changeOrigin:true,
ws:false,
pathRewrite:{
'^/web':''
}
}
}
}
}
target:目标服务器网址
changeOrigin:需要虚拟主机站点
ws:是否代理websocket
pathRewrite:{
'^/web':''
} 以/web开头的替换为‘’空串。
ajax请求如下写法:
axios.post("web/selectUserById", qs.stringify(this.user, {
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})).then(function(result) {
that.user = result.data;
console.log(result);
});
就是说,只要以web开头访问的就会被代理到目标地址http://localhost/vueTomcat/web。
如果访问的是web/selectUserById,就会被代理到http://localhost/vueTomcat/web/selectUserById。
谢谢!