Spring Cloud Gateway部署React SPA刷新出现白标错误求助

问题原因 #

React SPA采用前端路由（如BrowserRouter），正常通过GUI导航时是前端内部跳转，不会向网关发起新请求；但刷新页面时，浏览器会直接向网关请求当前URL路径（比如/dashboard），而你的网关仅配置了/xpense/service/**的API路由，没有匹配该前端路由的规则，因此返回404白标错误。

你之前尝试的ErrorPageRegistrar和WebServerFactoryCustomizer是Servlet容器的配置，而Spring Cloud Gateway基于WebFlux（Reactor Netty），这类配置完全不生效。

解决方案 #

在Gateway路由配置中添加一个兜底路由，将所有非API路径的请求转发到index.html，让React前端接管路由处理。注意这个路由必须放在所有API路由之后，避免覆盖API请求。

修改后的路由配置 #

server:
  port: 10443
spring:
  application:
    name: xpense-api-gateway
  cloud:
    gateway:
      routes:
        # 原有API路由，保持不变
        - id: xpense-service
          uri: http://localhost:18080/
          predicates:
            - Path=/xpense/service/**
        # 新增SPA兜底路由，放在最后
        - id: react-spa
          uri: forward:/index.html
          predicates:
            - Path=/**
          filters:
            # 排除API路径，避免API请求被错误转发到index.html
            - RewritePath=(?<!/xpense/service)/.*, /index.html

关键说明 #

1. 路由顺序：兜底路由必须放在所有API路由之后，Gateway会按顺序匹配路由，先匹配到API路由就不会进入SPA路由。
2. RewritePath过滤器：用正则排除/xpense/service/**路径，确保API请求正常转发到后端服务，不会被导向index.html。
3. 静态资源部署：确保React打包后的所有静态文件（index.html、js、css等）放在Gateway的classpath:/static/目录下（或自定义配置的静态资源目录），这样网关能正确读取到index.html。

额外检查 #

• 确认React项目使用的是BrowserRouter（而非HashRouter），如果用HashRouter刷新不会有问题，但URL会带#，不符合大部分场景需求。
• 测试刷新前端路由页面（如/dashboard），确认能正常加载，且API请求依然能正确转发到后端服务。

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