Spring Boot集成Angular4直接访问路由报Whitelabel 404错误求解决

这个问题我之前搭建SPA项目时也碰到过，核心原因是Angular是单页应用（SPA），前端路由是在浏览器端完成的，而直接输入带路由后缀的URL时，浏览器会向Spring Boot服务器发起请求，服务器找不到对应的后端接口或静态资源，就返回了404；但通过页面内跳转时，是Angular的路由模块在前端直接处理，不会触发新的服务器请求，所以能正常访问。

下面是具体的解决方法和排查方向：

一、核心解决方案：让Spring Boot转发前端路由请求到index.html #

我们需要配置Spring Boot，把所有非API、非静态资源的请求都转发到Angular的入口文件index.html，让Angular接管路由处理。这里有两种常用方式：

方式1：创建转发Controller #

编写一个Controller，捕获符合规则的请求并转发到index.html：

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

@Controller
public class SpaForwardController {

    // 匹配所有非静态资源的路径（排除带后缀的文件，比如.js/.css/.png等）
    @GetMapping(value = "/**/{path:[^.]*}")
    public String forwardToIndex() {
        return "forward:/index.html";
    }
}

这里的正则[^.]*确保不会把静态资源（如bundle.js、样式文件）也转发到index.html，避免页面加载失败。

方式2：通过WebMvcConfigurer配置视图控制器 #

如果使用Spring Boot 2.x及以上版本，可以通过配置类统一设置转发规则：

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) {
        // 匹配一级路径（如/login、/signup）
        registry.addViewController("/{spring:\\w+}")
                .setViewName("forward:/index.html");
        // 匹配多级路径（如/user/profile）
        registry.addViewController("/**/{spring:\\w+}")
                .setViewName("forward:/index.html");
        // 排除静态资源文件
        registry.addViewController("/{spring:\\w+}/**{spring:?!(\\.js|\\.css)$}")
                .setViewName("forward:/index.html");
    }
}

二、关键排查方向 #

如果配置后还是有问题，可以从以下几个方向排查：

• 检查静态资源路径是否正确：
  你的index.html在src/main/resources/static/assets/目录下，但Spring Boot默认的静态资源根目录是static/，正常访问localhost:8080应该会找static/index.html。你能直接访问首页说明可能有特殊配置，要确认：

  • 是否在application.properties里修改了静态资源路径（比如spring.web.resources.static-locations）？
  • Angular打包时是否把index.html输出到了static/根目录？如果是在assets/下，转发时要确保路径是forward:/assets/index.html。

• 确认Angular的base href配置：
  打开index.html，检查<base href="/">是否正确。如果base href设为了/assets/，会导致路由解析路径错误，直接访问/signup时会找不到资源，需要调整为根路径/。

• 验证转发规则是否排除了静态资源：
  如果转发规则太宽泛，把.js、.css等静态资源也转发到index.html，会导致页面加载失败。可以通过浏览器开发者工具查看静态资源的请求状态，确认bundle文件、样式文件是否能正常加载。

• 排查拦截器/过滤器的影响：
  虽然你说服务器端没有授权限制，但要检查是否有自定义的拦截器、过滤器，或者第三方框架（如Spring Security）拦截了这些前端路由请求，导致返回404。可以暂时禁用这些组件测试是否恢复正常。

• 测试转发是否生效：
  在转发Controller里添加日志输出（比如System.out.println("转发请求到index.html: " + request.getRequestURI());），确认当直接访问/signup时，是否触发了转发逻辑。

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