Angular路由部署到Java WAR后直接访问子路径404的配置问询

这个问题我太熟了！Angular单页应用部署到Java EE服务器（比如Wildfly）时，直接访问前端路由路径出现404是经典的SPA痛点——因为服务器只认物理文件，根本不知道你Angular里定义的/area、/barn这些前端路由，自然会返回找不到页面。下面给你几个靠谱的解决方案，按通用程度排序：

这是最稳妥的方法，不管你用Wildfly、Tomcat还是其他Java EE服务器都能用。核心思路是：拦截所有请求，判断如果请求的不是静态资源（比如JS、CSS、图片这些），就把请求转发到Angular的index.html，让前端路由来处理。

• 第一步：创建一个Filter类

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebFilter("/*")
public class SpaRoutingFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        // 初始化逻辑，不需要可以留空
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse res = (HttpServletResponse) response;

        String requestUri = req.getRequestURI();
        // 排除静态资源文件，可根据你的实际静态资源后缀调整
        if (!requestUri.contains(".") || requestUri.endsWith(".html")) {
            // 转发到index.html，注意要和构建时的--base-href保持一致
            req.getRequestDispatcher("/myappdir/index.html").forward(request, response);
        } else {
            // 静态资源直接放行
            chain.doFilter(request, response);
        }
    }

    @Override
    public void destroy() {
        // 销毁逻辑，不需要可以留空
    }
}

• 第二步：如果不用@WebFilter注解，需要在web.xml里手动配置过滤器：

<filter>
    <filter-name>SpaRoutingFilter</filter-name>
    <filter-class>com.yourpackage.SpaRoutingFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>SpaRoutingFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

注意：/myappdir/index.html要严格匹配你构建时的--base-href=/myappdir/参数，确保路径正确。

如果你只需要适配Wildfly，可以直接用它自带的Rewrite子系统，不用写Java代码，配置更简洁。

• 打开Wildfly的配置文件（比如standalone/configuration/standalone.xml）
• 找到<subsystem xmlns="urn:jboss:domain:undertow:12.0">（版本号可能随Wildfly版本变化），在<host name="default-host" alias="localhost">节点下添加rewrite规则：

<subsystem xmlns="urn:jboss:domain:undertow:12.0">
    <!-- 保留已有配置 -->
    <server name="default-server">
        <!-- 保留已有配置 -->
        <host name="default-host" alias="localhost">
            <!-- 添加这段rewrite配置 -->
            <location name="/myappdir" handler="welcome-content">
                <rewrite pattern="^/myappdir/(.*)$" substitution="/myappdir/index.html" flags="L">
                    <condition test="not path-prefix('/myappdir/css')" />
                    <condition test="not path-prefix('/myappdir/js')" />
                    <condition test="not path-prefix('/myappdir/assets')" />
                    <condition test="not regex('\.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$')" />
                </rewrite>
            </location>
            <!-- 保留已有配置 -->
        </host>
    </server>
    <!-- 保留已有配置 -->
</subsystem>

这个规则的作用是：所有访问/myappdir/下的请求，只要不是css、js、assets目录下的资源，也不是指定后缀的静态文件，就重写到/myappdir/index.html。flags="L"表示匹配到当前规则后就停止后续规则匹配。

这个方法配置最简单，但会把所有404请求（包括真正不存在的静态资源）都转发到index.html，适合对错误页面要求不高的场景。

• 修改web.xml，添加404错误页面配置：

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

同时确保welcome-file-list包含index.html：

<welcome-file-list>
    <welcome-file>index.html</welcome-file>
</welcome-file-list>

最后提醒：不管用哪种方案，都要确保Angular构建时的--base-href=/myappdir/参数正确，这是Angular路由能正常工作的前提。

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