Angular 17升级后HttpClient重复GET请求未触发网络请求问题

升级到Angular 17后，HttpClient的GET请求仅执行一次、后续调用返回缓存结果的问题，主要和客户端水合（Client Hydration）的transferCache机制以及withFetch()的缓存行为有关，以下是针对性解决方法：

方法1：全局禁用请求缓存（适合不需要水合缓存的场景） #

Angular 17默认通过provideClientHydration()启用了transferCache，会自动缓存GET请求。如果全局不需要这个缓存功能，修改app.config.ts中的配置：

// 替换原来的provideClientHydration()
provideClientHydration(withNoTransferCache()),

方法2：针对特定请求禁用缓存 #

如果需要保留全局水合缓存，仅让某个请求跳过缓存，除了设置transferCache: false，还需添加禁用浏览器缓存的请求头（因为withFetch()使用的浏览器fetch API可能会默认缓存请求）：
修改chat.service.ts中的getInbox方法：

import { HttpHeaders } from '@angular/common/http';

// ...

getInbox(): Observable<Array<Conversation>> {
  const url = `${environment.baseUrl}/api/chat/inbox`;

  return this.http.get<Array<Conversation>>(url, {
    withCredentials: this.withCredentials,
    transferCache: false,
    headers: new HttpHeaders({
      'Cache-Control': 'no-cache',
      'Pragma': 'no-cache',
      'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'
    })
  });
}

也可以通过添加时间戳参数的方式绕过缓存（你注释掉的方案也有效，属于URL缓存击穿的常用手段）：

const url = `${environment.baseUrl}/api/chat/inbox?t=${Date.now()}`;

方法3：调整withFetch()的使用 #

如果不需要使用浏览器的fetch API，可以从provideHttpClient中移除withFetch()，改用Angular默认的XMLHttpRequest实现，其缓存行为更符合旧版本的预期：

// 修改app.config中的HttpClient配置
provideHttpClient(withInterceptorsFromDi()), // 移除withFetch()

原因说明 #

• Angular 17的客户端水合功能默认启用transferCache，用于在服务器渲染（SSR）后复用请求结果，避免客户端重复发起相同请求；
• withFetch()会切换到浏览器原生的fetch API，而fetch的默认缓存策略是default，即会缓存符合条件的GET请求，需要显式通过请求头禁用；
• 单独设置transferCache: false可能无法覆盖浏览器自身的缓存机制，因此需要结合请求头或URL参数的方式彻底禁用缓存。

内容的提问来源于stack exchange，提问作者Tiago Roque Curião