部门原来的项目是前后端一体的项目,现在有意拆成前后端分离的项目,想用原来的前端模板改写。当时解决跨域用的方法比较粗暴,加之只考虑本地运行,用的是将前端请求路径写死,后端接受所有请求的方法,见下:
Django+vue前后端分离项目的跨域问题
部门项目本地开发后会远程部署,此方法不再适用,需要支持请求地址更改方便。查了可以在vue.config.js里配置proxy解决此问题
首先参考了配置文档
配置后报错Proxy error: Could not proxy request /api/step/test from localhost:8001 toxxx
https://blog.csdn.net/Reagan_/article/details/97498160
参考此链接进行了配置,依然报错
博客在这里着重写了Windows和Mac路径写法的区别,跟着使用了红框写法
https://blog.csdn.net/qq_36028750/article/details/106472330
又查到了上文,加上了http://问题解决
配置可参考:
module.exports = {
devServer: {
proxy: {
"/api": { //自定义
target: "http://你的服务器地址/api", //这里可以跟随项目实际部署服务器来
changeOrigin: true,
ws: true,
pathRewrite: {
"^/api": ""//自定义
}
}
}
}
}
————————————————
版权声明:本文为CSDN博主「weixin_39634443」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_39634443/article/details/111811518
附上代码:
配置
proxy:{
'/api':{
target:'http://172.18.3.106:8081',
changeOrigin:true,
pathRewrite:{'^/api' : ''}
}
}
前端请求
show(){
this.$http.get('/api/step/test')
.then((response) => {
console.log(response.bodyText)
})
}
后端
@RequestMapping("/test")
public String test(){
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date date = new Date();
System.out.println("ok"+sdf.format(date));
return "success";
}
没有完全定位问题原因,但这样操作后目前解决了问题,留记录以供参考
2021.3.12更新
Proxy error: Could not proxy request /step/test from localhost:9528 to http://172.28.100.132.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
换了项目,重新配置后没有加端口号,出现这个报错,加上端口号后问题解决