Angular Universal URL含不安全字符时Transfer State为空致XHR重复调用

TransferHttpCacheModule默认以请求URL+请求方法作为缓存key，服务端渲染时拿到的是解码后的URL（如/a/b/여），客户端发起请求时用的是编码后的URL（如/a/b/%EC%97%AC），两端生成的缓存key不匹配，导致客户端识别不到服务端存储的缓存，因此重复发起XHR请求。

方案1：自定义拦截器统一缓存key生成逻辑（推荐全局通用方案） #

替换默认的TransferHttpCacheModule，自行实现HTTP拦截器，统一对请求URL做编码/解码处理，保证两端生成的缓存key完全一致：

// 自定义Transfer State缓存拦截器
@Injectable()
export class CustomTransferCacheInterceptor implements HttpInterceptor {
  constructor(
    private transferState: TransferState,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 统一解码URL，消除服务端和客户端的URL格式差异
    const normalizedUrl = decodeURI(req.url);
    const cacheKey = makeStateKey<HttpResponse<any>>(`http-cache-${req.method}-${normalizedUrl}`);

    // 服务端逻辑：请求完成后写入缓存
    if (isPlatformServer(this.platformId)) {
      return next.handle(req).pipe(
        tap(event => {
          if (event instanceof HttpResponse) {
            this.transferState.set(cacheKey, event.clone());
          }
        })
      );
    }

    // 客户端逻辑：优先读缓存，命中则直接返回
    if (isPlatformBrowser(this.platformId)) {
      const cachedRes = this.transferState.get(cacheKey, null);
      if (cachedRes) {
        this.transferState.remove(cacheKey);
        return of(new HttpResponse(cachedRes));
      }
      return next.handle(req);
    }

    return next.handle(req);
  }
}

修改AppModule配置，移除原有TransferHttpCacheModule，添加拦截器注册：

@NgModule({
  // ...其他配置
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CustomTransferCacheInterceptor,
      multi: true
    }
  ]
})
export class AppModule {}

服务端的ServerTransferStateModule无需修改，保留原有引入即可。

方案2：修改服务端路由配置，关闭URL自动解码 #

若你使用Express作为服务端框架，默认会自动解码请求URL，可通过路由配置关闭该特性，保证服务端拿到的URL和客户端发起的编码后URL完全一致：

// Express路由配置
app.get('*', { decodeURIComponent: (str) => str }, (req, res) => {
  // 原有Angular Universal渲染逻辑
});

方案3：手动维护指定请求的Transfer State #

如果仅少数接口会触发该问题，无需修改全局逻辑，可手动为指定接口做缓存存取：

// 定义缓存key
const CUSTOM_DATA_KEY = makeStateKey<any>('custom-page-data');

// 服务端取数后写入缓存
if (isPlatformServer(this.platformId)) {
  this.http.get('/api/your/api/path').subscribe(data => {
    this.transferState.set(CUSTOM_DATA_KEY, data);
  })
}

// 客户端优先读缓存，未命中再发请求
const cachedData = this.transferState.get(CUSTOM_DATA_KEY, null);
if (cachedData) {
  this.pageData = cachedData;
  this.transferState.remove(CUSTOM_DATA_KEY);
} else {
  this.http.get('/api/your/api/path').subscribe(data => {
    this.pageData = data;
  })
}

内容的提问来源于stack exchange，提问作者Grzegorz Kniażuk