Tomcat部署后用PathLocationStrategy刷新页面遇404问题求助

核心原因 #

使用PathLocationStrategy时，Angular采用HTML5路由模式，刷新页面时浏览器会直接向Tomcat请求对应路径（比如/user/profile），但Tomcat的web应用中不存在该物理资源，因此返回404。需要配置Tomcat将所有路由请求转发到Angular的入口文件index.html，由Angular接管路由处理。

解决方案1：Tomcat URL重写（推荐） #

1. 启用Tomcat的rewrite模块：
   打开Tomcat安装目录下的conf/server.xml，确认RewriteValve配置未被注释：

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

   Tomcat 9及以上版本默认包含该模块，只需启用即可。

2. 创建重写规则文件：
   在应用的WEB-INF目录下（无则新建）创建rewrite.config，添加以下规则：

   RewriteCond %{REQUEST_URI} !^/(assets|api|.*\..*)$
   RewriteRule ^(.*)$ /index.html [L]
   

   规则说明：

   • 排除静态资源目录assets、API接口路径、带后缀的文件（如.js、.css），这类请求直接由Tomcat返回资源。
   • 其余所有请求转发到index.html，交由Angular处理路由。

3. 重新打包Angular应用并部署到Tomcat，重启服务器即可生效。

解决方案2：web.xml错误页面配置 #

若不想使用URL重写，可在WEB-INF/web.xml中添加404错误跳转配置：

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

注意：该方式会将所有404请求导向index.html，包括真正不存在的静态资源，调试时可能不够精准。

解决方案3：适配非根目录部署 #

若应用部署在Tomcat的子路径下（比如/my-app），打包时需指定base href：

ng build --prod --base-href=/my-app/

同时调整rewrite规则中的跳转路径：

RewriteRule ^(.*)$ /my-app/index.html [L]

验证步骤 #

1. 打包Angular应用并部署到Tomcat的webapps目录。
2. 访问应用首页，跳转至任意子路由页面。
3. 刷新该子页面，确认无404错误，Angular可正常加载对应组件。

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