树莓派部署Spring Boot整合Angular项目出现Whitelabel 404错误如何解决

• Angular打包产物未放置到正确路径：Spring Boot默认会扫描src/main/resources/static、src/main/resources/public等目录下的静态资源，如果ng build生成的dist目录产物没有完整拷贝到上述目录，就会导致根路径找不到index.html，返回404
• Angular路由与Spring Boot请求路径冲突：如果使用Angular的HTML5路由模式（无#后缀的路径），直接访问子路由或者刷新页面时，Spring Boot会将路径识别为后端接口请求，找不到对应接口就返回404
• 静态资源被拦截：项目中配置的Spring MVC拦截器、Spring Security权限规则如果没有放行静态资源路径，也会导致资源加载失败
• 上下文路径配置问题：如果Spring Boot配置了server.servlet.context-path参数，直接访问8080根路径会找不到资源，需要加上配置的前缀路径
• 打包规则错误：多模块项目如果没有配置自动拷贝Angular产物到Spring Boot资源目录的规则，最终生成的jar包里根本没有前端文件，自然无法访问

1. 确认静态资源路径正确 #

• 进入Angular项目根目录执行ng build --prod，打包完成后打开dist目录，注意高版本Angular会在dist下生成一层和项目同名的子目录，需要把子目录内的所有文件全部拷贝出来
• 将所有打包产物放到Spring Boot项目的src/main/resources/static目录下，确保index.html直接在static根目录，没有嵌套在子文件夹中

2. 适配Angular路由规则 #

新增Spring MVC配置类，将所有匹配不到后端接口的请求转发到index.html，交给Angular路由处理：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 匹配所有不带后缀的请求，转发到index.html，不影响js、css、图片等带后缀的资源加载
        registry.addViewController("/{path:[^\\.]*}").setViewName("forward:/index.html");
    }
}

3. 排查拦截规则 #

如果项目集成了Spring Security，需要新增配置放行静态资源：

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.WebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers("/**/*.html", "/**/*.js", "/**/*.css", "/**/*.png", "/**/*.jpg", "/**/*.ico", "/**/*.svg");
    }
}

同时检查application配置文件中是否自定义了spring.mvc.static-path-pattern、spring.resources.static-locations参数，确认没有修改默认的静态资源扫描规则。

4. 验证打包结果 #

重新打包Spring Boot项目，解压生成的jar包，检查BOOT-INF/classes/static目录下是否存在完整的Angular打包产物，确认无误后启动jar包即可正常访问8080端口。如果配置了上下文路径，访问时需要加上对应的前缀。

内容的提问来源于stack exchange，提问作者solarTechniker