Spring Boot Gateway MVC 转发React应用时出现加载停滞问题

问题背景 #

本地搭建Spring Boot Gateway MVC（运行于localhost:8080），React应用正常运行在localhost:5173。配置网关通过localhost:8080/ui提供UI服务后，访问时出现页面加载停滞情况，且原推荐的spring.cloud.gateway.mvc.http-client.type=autodetect配置因使用4.2.0版本已废弃。

核心原因分析 #

1. 路由路径未重写：网关将/ui/**的完整路径转发给React，但React的base配置为/ui/，导致资源请求路径不匹配，出现资源加载失败或循环请求。
2. HTTP客户端配置缺失：4.2.0版本废弃旧客户端类型配置后，默认客户端可能存在超时或连接池配置不合理，导致请求阻塞。
3. 潜在重定向循环：首页重定向逻辑若与UI路由配合不当，可能触发循环重定向。

解决方案 #

1. 修复UI路由的路径重写 #

修改application.properties中的UI路由配置，添加路径前缀剥离过滤器，确保转发给React的路径符合其base配置：

## UI
spring.cloud.gateway.mvc.routes[1].id=ui
spring.cloud.gateway.mvc.routes[1].uri=http://localhost:5173
spring.cloud.gateway.mvc.routes[1].predicates[0]=Path=/ui/**
spring.cloud.gateway.mvc.routes[1].filters[0]=StripPrefix=1  # 移除路径中的第一个段（/ui），转发为/xxx到React

说明：例如请求localhost:8080/ui/index.html会被转发到http://localhost:5173/index.html，匹配React的base=/ui/配置，确保资源能正确加载。

2. 配置4.2.0兼容的HTTP客户端 #

在application.properties中添加HTTP客户端超时与连接池配置，避免因请求阻塞导致加载停滞：

# 设置HTTP客户端超时时间
spring.cloud.gateway.mvc.http-client.connect-timeout=5s
spring.cloud.gateway.mvc.http-client.response-timeout=10s

# 优化Reactor Netty连接池参数（默认客户端）
spring.cloud.gateway.mvc.http-client.reactor.netty.connection-provider.max-idle-time=30s
spring.cloud.gateway.mvc.http-client.reactor.netty.connection-provider.max-life-time=1m

说明：4.2.0版本中，Spring Cloud Gateway MVC默认使用Reactor Netty作为HTTP客户端，上述配置可避免连接超时或资源耗尽问题。

3. 验证重定向逻辑 #

当前首页路由配置为：

## Home
spring.cloud.gateway.mvc.routes[2].id=home
spring.cloud.gateway.mvc.routes[2].uri=http://localhost:8080
spring.cloud.gateway.mvc.routes[2].predicates[0]=Path=/
spring.cloud.gateway.mvc.routes[2].filters[0]=RedirectTo=301,http://localhost:8080/ui/

该配置会将根路径请求重定向到/ui/，配合UI路由的StripPrefix=1，转发到React的根路径（/），可正常触发React的首页加载。若出现循环重定向，需确认网关路由匹配顺序（按配置定义顺序执行），确保根路径路由优先匹配。

4. 排查浏览器与网关日志 #

• 打开浏览器开发者工具，查看网络标签页，检查资源请求是否存在404、超时或CORS错误。
• 查看网关日志，确认转发请求是否成功到达localhost:5173，是否有超时或异常堆栈信息。

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