Spring Boot+Angular合并部署路由404问题及配置需求求助

这个问题我之前整合Spring Boot和Angular的时候也碰到过，你的推测完全正确——直接访问前端路由URL时，Spring Boot会试图找对应的后端请求映射，而不是交给Angular的前端路由处理。下面给你两种靠谱的配置方案，完美实现/rest/开头的请求交给Spring处理，其余请求转发给Angular：

方案一：用控制器实现请求转发 #

创建一个专门的控制器，负责把所有非/rest/开头的GET请求转发到Angular的入口页面index.html：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AngularRouteForwarder {

    // 匹配所有非/rest/开头的GET请求，且排除API类型的JSON请求
    @GetMapping(value = "/**", headers = "Accept!=application/json")
    public String forwardToAngularIndex() {
        return "forward:/index.html";
    }
}

这里的headers条件是为了避免误转发后端API的JSON请求，确保只有前端页面请求才会被转发。

方案二：通过WebMvcConfigurer全局配置 #

如果你更喜欢用全局配置的方式，可以实现WebMvcConfigurer接口来统一处理路由转发：

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 WebMvcRoutingConfig implements WebMvcConfigurer {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 配置优先级，确保/rest/开头的请求先被后端控制器匹配
        registry.addViewController("/**")
                .setViewName("forward:/index.html")
                .setOrder(1);
    }
}

关键前置准备 #

1. Angular打包部署：把Angular项目打包后的文件（执行ng build后生成的dist目录下的所有内容）复制到Spring Boot项目的src/main/resources/static目录下，这样Spring能正确加载Angular的静态资源（JS、CSS、图片等）。
2. HTML5路由模式配置：如果你的Angular用了HTML5模式（非Hash模式），需要在index.html里添加<base href="/">，并且打包时指定基础路径：ng build --prod --base-href /。

原理说明 #

当用户直接访问比如http://localhost:8080/user/profile这类前端路由URL时，Spring Boot会接收到请求，因为没有对应的后端@RequestMapping，就会触发我们配置的转发规则，把请求导向index.html。Angular加载后，会根据URL路径渲染对应的组件，解决404问题。而/rest/开头的请求，因为后端有对应的控制器映射，会被优先处理，不会被转发到Angular。

内容的提问来源于stack exchange，提问作者Matúš Zbojník