MENU

SpringBoot前后端分离Vue去掉url中#刷新页面报404错误

概述

对前端不是很熟悉,在做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


文章标题:SpringBoot前后端分离Vue去掉url中#刷新页面报404错误
如果文中内容侵犯了您的权益,请及时与博主取得联系进行删除!
本站文章未经许可禁止转载,本文地址:https://blog.wanvale.com/archives/126/

Last Modified: June 20, 2020
Archives QR Code Tip
QR Code for this page
Tipping QR Code