感谢各位一年多的陪伴,因内容调整,本站将于近日迁移到新域名并不再更新主要内容。
特此通知。
概述
对前端不是很熟悉,在做SpringBoot+Vue前后端分离项目时,使用vue-router-history去掉url中的“#”后,发现刷新前端或者直接访问url会报404
问题分析
项目的前后端是分别放在不同服务器上的
静态页面使用Nginx部署在服务器A上
SpringBoot项目用jar包方式部署在服务器B上
研究了很久,发现原因在于Vue使用history-mode后,输入URL直接访问或刷新时不会经过router,而是直接GET请求后端的接口,此时后端不存在该页面(因为前端页面不存在于Springboot下,SpringBoot项目的static文件夹是空的),所以会返回404
注:后端配置了404页面返回状态码而不是Whitelabel Error Page
解决方法
首先后端是一定要返回404状态码的,下面的内容需要写到全局错误处理controller里
@RequestMapping("/error")
@ResponseBody
public Object errorHadler(HttpServletRequest request, HttpServletResponse response) {
Map<String,Object> map=new HashMap<>();
map.put("code",response.getStatus());
map.put("msg","请求失败");
map.put("data","error");
return map;
}
接下来正常配置vue的router-history
export default new Router({
// 命名:组件名大驼峰、path/name小驼峰
mode: 'history',
base,
routes: [
// 这里写你自己的routes
]
})
此时如果你直接运行前后端,前端访问后端接口,跳转后刷新会发现一个很神奇的事情:页面404了,而且还是后端直接返回给你的404,没经过vue路由。
接下来重点来了,把你的项目打包成静态文件(HTML、CSS、JS、MAP),然后部署到nginx服务器
先排除掉项目的错误,然后配置nginx的rewrite规则,加入以下内容:
location / {
try_files $uri $uri/ /index.html;
}
(重启nginx)运行项目,再次测试你会发现,原来的404问题解决了
总结
前段调的我头昏眼花的
一个写后端的去调前端,调到后半夜也都是常有的事……
参考文档
https://router.vuejs.org/zh/guide/essentials/history-mode.html