Angular 18线上应用缓存问题：HttpClient始终返回相同数据

我开发了一款基于Angular 18的足球实时比分Web应用，部署在Firebase和Netlify上。本地localhost环境运行完全正常，每次刷新都会发起新请求并获取最新比分；但线上环境所有服务都无法正常工作，始终返回相同的旧数据，即使实际比分更新了也不显示新结果。我确定是缓存问题，但尝试了多种方案都没解决。

已尝试的解决方案 #

• 创建缓存请求头拦截器：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpHeaders } from '@angular/common/http';

@Injectable()
export class CacheInterceptorService implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler) {

    const httpRequest = req.clone({
      headers: new HttpHeaders({
        'X-Auth-Token': this.authToken,
        'Cache-Control': 'no-cache, no-store, must-revalidate, post-check=0, pre-check=0',
        'Pragma': 'no-cache',
        'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'
      })
    });

    return next.handle(httpRequest);
  }
}

• 修改Firebase.json配置：

{
  "hosting": {
    "public": "dist/toto-euro-24/browser",
    "headers": [
      {
        "source": "/**/!(*.*)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store"
          }
        ]
      }
    ],
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

• 在index.html添加缓存控制meta标签：

<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />

• 尝试为HttpClient请求添加唯一URL参数：但使用的免费外部API不允许添加Date.now()生成的唯一字符串
• 销毁Observable订阅
• Chrome浏览器中禁用缓存刷新、硬刷新、使用无痕模式测试
• 使用ng build --configuration development构建应用（生产环境已设置outputHashing为all）

所有尝试均无效，线上问题仍存在。

针对性解决建议 #

1. 确认拦截器正确注册 #

检查CacheInterceptorService是否在app.module.ts或对应配置文件中完成注册，否则拦截器不会生效：

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: CacheInterceptorService, multi: true }
  ]
})
export class AppModule { }

另外，注意拦截器中的this.authToken是否已正确赋值，未初始化可能导致请求异常，建议添加默认值或检查赋值逻辑。

2. 调整部署平台的缓存规则 #

• Firebase：当前source规则/**/!(*.*)可能未覆盖API请求路径，建议修改为匹配API前缀的规则，比如API请求前缀是/api：

{
  "hosting": {
    "public": "dist/toto-euro-24/browser",
    "headers": [
      {
        "source": "/api/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      {
        "source": "**/*.@(js|css|png|jpg|jpeg|gif|svg|ico)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000"
          }
        ]
      }
    ],
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

• Netlify：在netlify.toml中添加对应缓存规则：

[[headers]]
  for = "/api/*"
  [headers.values]
    Cache-Control = "no-cache, no-store, must-revalidate"

3. 检查API响应头并添加验证字段 #

打开浏览器DevTools的Network面板，查看线上API请求的响应头，确认是否存在服务端返回的强缓存字段（如max-age=86400）。如果是服务端强制缓存，可在拦截器中添加验证请求头：

const httpRequest = req.clone({
  headers: new HttpHeaders({
    'X-Auth-Token': this.authToken || '',
    'Cache-Control': 'no-cache, no-store, must-revalidate',
    'Pragma': 'no-cache',
    'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT',
    'If-Modified-Since': new Date().toUTCString()
  })
});

4. 排查CDN缓存 #

Firebase和Netlify均依赖CDN分发内容，可能CDN缓存了API响应。进入平台后台，针对API请求路径禁用CDN缓存：

• Firebase：在Hosting设置中添加缓存排除规则
• Netlify：进入Site settings > Performance > Edge caching，添加规则排除API路径的缓存

5. 尝试合法的缓存破击参数 #

如果API允许，可添加通用的缓存破击参数（如_），这类参数通常不会被API拒绝：

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

// 在请求时添加
let params = new HttpParams();
params = params.set('_', new Date().getTime().toString());

this.http.get(apiUrl, { params });

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