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

在SpringBoot+Vue前后端分离项目中,使用vue-router的history模式去除URL中的“#”符号会导致刷新页面时出现404错误。原因是直接请求未配置的后端接口。解决方案包括确保后端返回404状态码,正确配置vue-router的history模式,并在Nginx服务器上配置rewrite规则。将项目打包为静态文件并部署到Nginx后,刷新页面的404问题得到解决。

原文链接:https://blog.wanvale.com/archives/126/

概述

对前端不是很熟悉,在做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 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值