Angular 5部署Tomcat 7刷新404问题及Apache重写规则参考

这个问题我之前也碰到过！Angular作为单页应用，前端路由在刷新时会让Tomcat误以为是后端请求，找不到对应资源就返回404，我们可以通过Tomcat的Rewrite Valve来实现类似Apache的重定向效果，步骤如下：

1. 配置Rewrite Valve #

在你的Angular应用打包后的Web目录（或war包内）的META-INF文件夹下，创建或修改context.xml文件，添加RewriteValve的配置：

<Context>
    <!-- 启用URL重写阀门 -->
    <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
</Context>

如果没有META-INF文件夹就新建一个，确保路径正确。

2. 编写重写规则 #

在WEB-INF目录下创建rewrite.config文件，写入和你Apache规则逻辑一致的Tomcat重写规则：

# 如果请求的是已存在的文件或目录，直接访问，不做重写
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# 所有不存在的资源请求，都转发到index.html让Angular处理路由
RewriteRule ^ /index.html [L]

这个规则的逻辑和你用的Apache规则完全一致：优先处理真实存在的静态资源或目录，其他请求都交给Angular的index.html来处理前端路由。

3. 检查Base Href配置 #

别忘了确认Angular项目的index.html里的<base href>配置正确：

• 如果你的应用部署在Tomcat的根路径（比如http://localhost:8080/），那么设置为 <base href="/">
• 如果是部署在子路径（比如http://localhost:8080/my-angular-app/），则设置为 <base href="/my-angular-app/">

这个配置会影响Angular路由的路径解析，一定要对应你的部署路径。

注意事项 #

• 如果你的Tomcat 7版本低于7.0.42，可能没有自带RewriteValve，这时候需要下载tomcat-rewrite.jar放到Tomcat的lib目录下（确保jar版本和Tomcat版本匹配）。
• 打包Angular应用时，记得用ng build --prod（Angular 5的生产环境打包命令），并确保打包后的文件正确部署到Tomcat的webapps目录下。

这样配置后，刷新页面就不会再出现404错误了，Tomcat会把所有非静态资源的请求转发到Angular的入口文件，由前端路由来处理。

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