WAS Liberty应用刷新网页时出现404 Not Found问题求助

我之前遇到过一模一样的问题，这是典型的Angular客户端路由在Java应用服务器上的常见坑——正常访问时，你是从根路径进入应用，路由完全由Angular在浏览器端处理；但刷新页面时，浏览器会直接向服务器请求当前完整URL对应的资源，而服务器上根本没有这些路由路径对应的静态文件，所以返回404错误。

针对WebSphere Liberty 17.0.0.3，这里有两个可行的解决方案：

方案一：利用404错误页跳转（简单但有局限） #

如果你的应用没有太多需要区分的真实404场景，可以直接在应用的WEB-INF/web.xml中添加404错误页配置，把所有404请求转发到Angular的入口文件index.html：

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

⚠️ 注意：这种方法会把所有404请求都导向index.html，包括真正不存在的静态资源（比如你输错的图片路径），所以如果需要区分真实404，更推荐下面的方案。

方案二：使用Liberty的URL重写特性（更精准） #

Liberty自带rewrite-1.0特性，可以帮我们精准地将客户端路由请求转发到index.html，同时保留静态资源和API接口的正常访问：

1. 启用rewrite特性：在你的Liberty服务器server.xml中添加如下配置：

<featureManager>
    <feature>rewrite-1.0</feature>
</featureManager>

2. 配置重写规则：在应用的WEB-INF目录下创建rewrite.xml文件，添加以下规则（根据你的实际路径调整排除项）：

<rewrite>
    <rule>
        <name>Angular Route Rewrite</name>
        <condition>
            <and>
                <!-- 排除Angular入口文件 -->
                <url-pattern>!^/index.html</url-pattern>
                <!-- 排除API接口路径（如果你的应用有后端API） -->
                <url-pattern>!^/api/*</url-pattern>
                <!-- 排除静态资源目录和文件 -->
                <url-pattern>!^/assets/*</url-pattern>
                <url-pattern>!^/*.js</url-pattern>
                <url-pattern>!^/*.css</url-pattern>
                <url-pattern>!^/*.ico</url-pattern>
                <url-pattern>!^/*.png</url-pattern>
                <!-- 只针对GET请求生效 -->
                <method>GET</method>
                <dispatcher>REQUEST</dispatcher>
            </and>
        </condition>
        <!-- 将符合条件的请求重写到index.html -->
        <action type="rewrite" url="/index.html"/>
    </rule>
</rewrite>

3. 确认Angular路由模式：确保你的Angular应用使用的是HTML5模式（即没有URL中的#），在app-routing.module.ts中应该是这样配置的：

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

完成以上配置后，重新部署应用，刷新页面就能正常加载对应的Angular路由页面了。

内容的提问来源于stack exchange，提问作者G. Richards