在Angular HttpClient.post()监听事件时，如何获取响应头content-length？

嘿，我来帮你搞定这个问题！当你用Angular的HttpClient以observe: 'events'模式发起POST请求时，要拿到响应头里的Content-Length，得注意两个核心点：浏览器的CORS限制，以及事件类型的判断。我给你一步步拆解：

1. 先搞定后端的CORS配置（关键！） #

浏览器的同源策略会限制前端获取非默认的响应头，Content-Length就属于需要后端主动暴露的头。所以你得先确认后端服务有没有设置Access-Control-Expose-Headers响应头，把Content-Length包含进去，比如：

Access-Control-Expose-Headers: Content-Length

如果后端没配置这个，哪怕响应里确实有Content-Length，前端也拿不到——这是很多人踩坑的地方！

2. 在前端代码中针对性处理事件 #

当你用observe: 'events'时，HttpClient会发出多种类型的事件（比如上传进度、下载进度、完整响应），只有当事件类型是HttpEventType.Response时，才能拿到完整的响应头。你可以修改你的pipe里的map操作来实现：

import { HttpEventType } from '@angular/common/http'; // 别忘了导入这个枚举

generateReport(report: any) {
  return this.http.post(`Test`, JSON.stringify(report), {
    headers: this.appGlobals.httpDocumentDownloadOptions.headers,
    responseType: 'arraybuffer',
    observe: 'events',
    reportProgress: true
  }).pipe(
    map(event => {
      // 只在完整响应事件中获取Content-Length
      if (event.type === HttpEventType.Response) {
        // 获取响应头中的Content-Length
        const contentLengthStr = event.headers.get('Content-Length');
        // 转成数字类型（如果需要的话）
        const contentLength = contentLengthStr ? parseInt(contentLengthStr, 10) : 0;
        
        console.log('响应内容长度:', contentLength);
        // 你可以在这里把长度存到变量或者服务里供后续使用
      }
      return event; // 保留原事件返回，不影响其他逻辑
    }),
    catchError(this.appGlobals.handleError),
  );
}

额外小提示 #

如果你的需求是在下载进度中获取总长度，其实HttpEventType.DownloadProgress事件里的total属性就是Content-Length的值，但同样依赖后端配置了CORS暴露头——如果没配置，total会是0或者undefined。所以两种方式都可以，看你是需要在进度中用还是在完整响应后用。

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