springboot整合Thymeleaf web开发出现Whitelabel Error Page

背景

在做java端上应用开发的时候,从资源和部署操作成本两方面考虑,一般会将前端的静态资源直接与后端应用一起打包,通过springboot内嵌的Tomcat提供web服务。进入web首页登录一直到后续业务流程正向操作,页面都能正常加载静态资源,但触发页面刷新操作的时候,就出现了Whitelabel Error Page,访问不成功。本文针对此问题做解答。

1. springboot web项目搭建开发

在pom文件中增加thymeleaf依赖

复制代码
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

配置静态资源处理器:

java 复制代码
public class BaseWebConfig implements WebMvcConfigurer {
    private LoginInterceptor loginInterceptor;
    private PermissionInterceptor permissionInterceptor;

    public List<String> whiteUrl = new ArrayList<>(Arrays.asList(
            "/login",
            "/doLogin",
            "/css/**", // 排除css目录下的所有资源
            "/js/**",  // 排除js目录下的所有资源
            "/images/**", // 排除images目录下的所有资源
            "/favicon.ico", // 排除favicon.ico
            "/static/**" // 排除static目录下的所有资源
    ));
    
    // 登录拦截器,后端所有的接口都是api/开头
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(loginInterceptor)
               .addPathPatterns("/api/**")
               .excludePathPatterns(whiteUrl)
               .order(1);
    }

    // 静态资源放到html目录下
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**")
               .addResourceLocations("classpath:/html/");
    }

    // 默认进入登录页
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("forward:/index.html");
    }
}

配置启动thymeleaf

java 复制代码
spring.thymeleaf.prefix=classpath:/html/
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false

静态文件结构:

|-- src

| |--main

| | |-- resources

| | |-- application.properties

| | | |-- html

| | | | |-- index.html

| | | | |-- app.js

...

2. 问题暴露

访问后端localhost:8080/login,正常跳转到登录页。登录成功后,浏览器中的地址因为前端自动的路由规则,变成了

localhost:8080/edge?ownerId=jcknuxh&tab=sub1-data-management

看网络请求也都正常

在浏览器页面刷新,直接进入Whitelabel Error Page

查看很多网上的教程,有建议直接拦截所有的请求,转发到index.html视图,如下代码:

java 复制代码
@Controller
public class IndexController{

    @GetMapping("{/path})
    public String index(@PathVariable String path){
        return "forward:/index.html";
    }

}

然后就出现了错误:

circular view path

3. 问题解决

解题的思路是参照NGINX加载静态页面,当有不识别的页面的时候,直接跳转到index.html页面。Nginx中的配置如下:

XML 复制代码
server {
    listen 80;

    server_name localhost;

    root /usr/share/nginx/html;

    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

}

在springboot中怎么配置呢?

java 复制代码
 // 默认进入登录页
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/{path;[^\\.]*}").setViewName("forward:/index.html");
    }

问题就解决了。原理是当遇到不识别的页面的时候,就跳转到首页,首页有对应的js、css请求路由,从而在刷新页面的时候,正常渲染。

相关推荐
tang_jian_dong1 小时前
springboot + vue3 拉取海康视频点位及播放
spring boot·后端·音视频
黄团团1 小时前
SpringBoot连接Sftp服务器实现文件上传/下载(亲测可用)
服务器·spring boot·github
郝学胜-神的一滴3 小时前
SpringBoot实战指南:从快速入门到生产级部署(2025最新版)
java·spring boot·后端·程序人生
小马爱打代码10 小时前
Spring Boot 接口安全设计:接口限流、防重放攻击、签名验证
网络·spring boot·安全
苹果醋312 小时前
iview中实现点击表格单元格完成编辑和查看(span和input切换)
运维·vue.js·spring boot·nginx·课程设计
武昌库里写JAVA12 小时前
iView Table组件二次封装
vue.js·spring boot·毕业设计·layui·课程设计
极简之美14 小时前
spring boot h2数据库无法链接问题
数据库·spring boot·oracle
中东大鹅14 小时前
SpringBoot配置文件
java·spring boot·spring
Micro麦可乐15 小时前
前端与 Spring Boot 后端无感 Token 刷新 - 从原理到全栈实践
前端·spring boot·后端·jwt·refresh token·无感token刷新
中东大鹅16 小时前
SpringBoot配置外部Servlet
spring boot·后端·servlet