Angular 5部署Tomcat后深层路由正常直接路由报404求助

这个问题我之前帮不少开发者踩过坑，核心原因很简单：你用错配置文件了！.htaccess是Apache HTTP服务器的配置文件，Tomcat作为Java Servlet容器根本不识别它。而Angular是单页应用（SPA），所有路由逻辑都是前端处理的——当你直接访问localhost:8080/aboutUs时，Tomcat会默认去寻找这个路径对应的静态文件，找不到就抛出404；但深层路由能正常工作，是因为你是从首页通过前端导航过去的，请求根本没发到Tomcat，是Angular自己处理的。

下面给你两个靠谱的解决方案，选一个适合你的就行：

方法一：通过web.xml配置错误页面转发 #

这个方法不需要额外开启Tomcat模块，适合快速解决：

1. 在Tomcat的webapps/ROOT目录下创建WEB-INF文件夹（如果还没有的话）
2. 在WEB-INF里新建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">

    <!-- 设置默认首页为Angular的index.html -->
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>

    <!-- 将所有404请求转发到index.html，由Angular处理路由 -->
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

3. 重启Tomcat，现在直接访问localhost:8080/aboutUs应该就能正常加载了

方法二：使用Tomcat的RewriteValve（更灵活推荐） #

如果你的Tomcat版本是8.0及以上，推荐用这个方法，它和Apache的Rewrite规则逻辑类似，适配性更强：

1. 打开Tomcat的conf/server.xml文件，找到<Host>标签，在里面添加RewriteValve的配置：

<Host name="localhost"  appBase="webapps"
      unpackWARs="true" autoDeploy="true">
    <!-- 其他原有配置... -->
    <!-- 添加这一行开启RewriteValve -->
    <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
</Host>

2. 在conf/Catalina/localhost目录下创建rewrite.config文件（如果没有Catalina/localhost路径就手动创建），写入以下重写规则：

# 排除静态资源（css、js、图片等），这些让Tomcat直接返回
RewriteCond %{REQUEST_URI} !^.*\.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$
# 排除已经是index.html的请求
RewriteCond %{REQUEST_URI} !^/index.html$
# 把其他所有请求转发到index.html
RewriteRule ^(.*)$ /index.html [L]

3. 重启Tomcat，这样所有非静态资源的请求都会被转发到Angular的入口文件，前端路由就能正常处理了

额外提醒 #

记得Angular项目构建的时候，最好加上--base-href "/"参数，确保资源路径正确：

ng build --prod --base-href "/"

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