在IBM WebSphere部署Angular 5应用刷新遇404问题求助

嘿，我刚好处理过类似的Angular + WebSphere部署问题，刷新页面404本质上都是SPA路由的老问题——WebSphere默认会把所有非静态资源的请求当成后端接口或者文件，不知道要转发到index.html让Angular自己处理路由。下面给你几个靠谱的解决方案，按你的需求选就行：

方案1：修改Web应用的web.xml配置（无需额外依赖） #

这是最直接的方法，利用WebSphere的错误页面配置，把404请求转发到index.html。

找到你Web应用的WEB-INF/web.xml文件，添加以下配置：

<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">

    <!-- 保留你已有的servlet、filter等配置 -->

    <!-- 捕获404错误，转发到index.html -->
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

注意事项：

• 如果你的Angular应用部署在WebSphere的子上下文（比如http://your-server/my-angular-app），要把<location>改成/my-angular-app/index.html
• 这个方法会把所有404请求都转到index.html，包括真正的资源缺失（比如某个js文件找不到），所以如果你的应用有后端API，要确保API接口不会返回404，或者提前做好API的错误处理。

方案2：使用URL重写过滤器（更灵活，推荐） #

如果方案1的全局404转发不符合你的需求（比如要区分API和前端路由），可以用Tuckey URLRewriteFilter来精准控制路由转发。

步骤1：添加依赖 #

如果是Maven项目，在pom.xml中加入：

<dependency>
    <groupId>org.tuckey</groupId>
    <artifactId>urlrewritefilter</artifactId>
    <version>4.0.4</version>
</dependency>

如果是手动部署，把对应的jar包放到WEB-INF/lib目录下。

步骤2：配置过滤器到web.xml #

在web.xml中添加过滤器配置：

<filter>
    <filter-name>UrlRewriteFilter</filter-name>
    <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>UrlRewriteFilter</filter-name>
    <url-pattern>/*</url-pattern>
    <dispatcher>REQUEST</dispatcher>
    <dispatcher>FORWARD</dispatcher>
</filter-mapping>

步骤3：编写重写规则 #

在WEB-INF目录下创建urlrewrite.xml文件，添加以下规则：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE urlrewrite PUBLIC "-//tuckey.org//DTD UrlRewrite 4.0//EN"
        "http://www.tuckey.org/res/dtds/urlrewrite4.0.dtd">
<urlrewrite>
    <!-- 只转发前端路由请求，排除API、静态资源和index.html本身 -->
    <rule>
        <name>Angular Route Forward</name>
        <!-- 排除API路径（假设你的API都在/api/下） -->
        <condition type="request-uri" operator="notequal">^/api/.*$</condition>
        <!-- 排除Angular的静态资源目录 -->
        <condition type="request-uri" operator="notequal">^/assets/.*$</condition>
        <!-- 排除所有静态文件类型 -->
        <condition type="request-uri" operator="notequal">^/.*\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$</condition>
        <!-- 排除index.html本身 -->
        <condition type="request-uri" operator="notequal">^/index.html$</condition>
        <!-- 匹配所有其他请求 -->
        <from>^/(.*)$</from>
        <!-- 转发到index.html -->
        <to type="forward">/index.html</to>
    </rule>
</urlrewrite>

这个方案的优点是：只转发前端路由相关的请求，不会干扰API和静态资源的访问，真正的404（比如资源不存在）依然会正常返回，非常适合前后端分离的全栈应用。

方案3：改用Angular的HashLocationStrategy（最简单的备选） #

如果上面的服务器端配置都搞不定，或者你赶时间，可以临时用这个方法——不需要修改WebSphere的任何配置，只需要改Angular的路由设置。

在你的app.module.ts中，修改路由的LocationStrategy：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes, HashLocationStrategy, LocationStrategy } from '@angular/router';

// 你的路由配置
const routes: Routes = [
  // ... 你的路由定义
];

@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  // 替换成HashLocationStrategy
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
  bootstrap: [AppComponent]
})
export class AppModule { }

这个方法的缺点是URL会带上#前缀（比如http://your-server/#/dashboard），但胜在零服务器配置，适合快速验证或者对URL格式要求不高的场景。

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