SSR环境下禁用HTTP客户端缓存：解决APP_INITIALIZER缓存重复请求问题

以下几种方法可以彻底清除缓存，让首次请求就能拿到最新配置：

• 给请求添加缓存控制头
  直接在HTTP请求里设置强制不缓存的响应头，明确告诉浏览器和代理服务器不要存储该请求的结果：

  this.http.get('/api/config', {
    headers: new HttpHeaders({
      'Cache-Control': 'no-cache, no-store, must-revalidate',
      'Pragma': 'no-cache',
      'Expires': '0'
    })
  });
  

• 手动清除TransferState缓存
  即便配置了withNoHttpTransferCache，个别场景下TransferState仍可能残留旧缓存数据。可以在发起请求前手动清除对应URL的缓存状态：

  import { HttpTransferCache } from '@angular/common/http';
  
  export function loadConfig(http: HttpClient, transferCache: HttpTransferCache) {
    return () => {
      transferCache.clear('/api/config');
      return http.get('/api/config').toPromise();
    };
  }
  
  // 提供者配置
  {
    provide: APP_INITIALIZER,
    useFactory: loadConfig,
    deps: [HttpClient, HttpTransferCache],
    multi: true
  }
  

• 给请求URL追加唯一标识
  在请求URL后面拼接时间戳或随机数，让每次请求的URL都唯一，直接绕过浏览器缓存：

  const timestamp = new Date().getTime();
  this.http.get(`/api/config?ts=${timestamp}`);
  

• 检查服务器端缓存配置
  有时问题根源在服务器，比如服务器给配置接口设置了过长的缓存过期时间。需要确保服务器返回的响应头中，Cache-Control配置为no-cache或短有效期：

  Cache-Control: public, max-age=0, must-revalidate
  

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