Tomcat部署Angular 14刷新或深链接出现404问题求助

问题根源 #

Angular是单页应用（SPA），前端路由由自身接管。刷新或直接访问深链接时，Tomcat会尝试寻找对应物理路径（比如/example/user/1），但该路径不存在，因此返回404。之前的配置缺少关键的路由重写规则，仅添加RewriteValve和错误页面配置无法完全解决问题。

具体解决方案 #

1. 修正Angular构建的base-href参数 #

将构建命令中的./改为对应应用的上下文路径（比如/example/），确保Angular路由和静态资源加载路径正确：

ng build --configuration production --base-href /example/

（每个应用替换对应的上下文名，比如test应用用/test/）

2. 配置RewriteValve的路由重写规则 #

方式一：全局配置（适用于所有应用）

在Tomcat的conf/Catalina/localhost目录下创建rewrite.config文件，添加以下规则：

# 处理example应用的路由重写
RewriteCond %{REQUEST_URI} !^.*\.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$
RewriteCond %{REQUEST_URI} !^/example/index.html$
RewriteRule ^/example/(.*)$ /example/index.html [L]

# 处理test应用的路由重写
RewriteCond %{REQUEST_URI} !^.*\.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$
RewriteCond %{REQUEST_URI} !^/test/index.html$
RewriteRule ^/test/(.*)$ /test/index.html [L]

规则说明：排除静态资源请求，将非静态资源的深链接请求重写到对应应用的index.html，交给Angular处理路由。

方式二：单个应用独立配置（更灵活）

在每个应用的WEB-INF目录下创建rewrite.config文件（以example应用为例）：

RewriteCond %{REQUEST_URI} !^.*\.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$
RewriteCond %{REQUEST_URI} !^/index.html$
RewriteRule ^(.*)$ /index.html [L]

然后在应用的META-INF目录下创建context.xml文件（无则新建），添加RewriteValve配置：

<Context>
  <Valve className="org.apache.catalina.valves.rewrite.RewriteValve"/>
</Context>

这种方式无需修改Tomcat全局配置，每个应用独立管理路由重写。

3. 调整web.xml的错误页面配置（可选补充） #

如果仍有少数场景触发404，可修正web.xml中的错误页面路径，确保指向当前应用的index.html：

<web-app>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

（注意：此配置需配合RewriteValve使用，单独使用可能导致路由状态丢失）

4. 重启Tomcat验证 #

修改完所有配置后，重启Tomcat服务器，测试刷新深链接或直接访问深链接，确认页面正常加载并路由到对应内容。

内容的提问来源于stack exchange，提问作者Iñigo Gorosabel