Spring Cloud Gateway对接Angular路由刷新访问子路径返回404问题

问题本质 #

Angular默认采用HTML5 History模式实现前端路由，所有路由逻辑由前端框架接管，服务端仅存储入口index.html文件与静态资源，不存在/admin/users这类子路径对应的实体资源。直接访问或刷新子路径时，请求会直接打到后端查找资源，因此返回404错误。 #

解决方案 #

方案1：Spring Cloud Gateway层面配置路径重写（推荐，无需修改Tomcat配置） #

修改网关路由配置，新增过滤器规则，区分静态资源请求与路由请求，将非静态资源的请求全部重写至Angular入口文件：

server:
  port: 9091
spring:
  cloud:
    gateway:
      routes:
      - id: adminui
        uri: http://localhost:9092
        predicates:
        - Path=/admin/**
        filters:
        # 静态资源请求原样透传
        - RewritePath=/admin/(.*\.(?:css|js|png|jpg|svg|ico|json)$), /admin/$1
        # 其他所有请求重定向到Angular入口文件，交由前端处理路由
        - RewritePath=/admin/.*, /admin/index.html

方案2：Tomcat层面配置404回退规则 #

如果无需调整网关配置，可在Tomcat部署的Angular应用目录下新增错误页规则：

1. 进入Tomcat的webapps/admin/WEB-INF目录，不存在则手动创建
2. 新建web.xml文件，写入如下配置：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!-- 所有404请求回退到Angular入口文件 -->
    <error-page>
        <error-code>404</error-code>
        <location>/admin/index.html</location>
    </error-page>
</web-app>

注意事项 #

Angular打包时需指定正确的base路径，执行打包命令时添加参数：ng build --base-href /admin/，保证前端路由路径匹配规则正确。 #

内容的提问来源于stack exchange，提问作者Stefan R.