Angular 13 POST请求Blob响应headers未定义，无法获取文件名

问题原因 #

你的代码里，HttpClient的POST请求未配置observe: 'response'，导致返回的是Blob格式的响应体本身，而非包含响应头的HttpResponse对象，因此res.headers会显示undefined。另外，跨域场景下后端需要主动暴露Content-Disposition头，否则前端无法访问该字段。

解决方案步骤 #

1. 修改服务中的请求配置 #

在POST请求的选项里添加observe: 'response'，确保返回完整的HttpResponse对象：

downloadRelatorioArquivos(data: any): Observable<HttpResponse<Blob>> {
  return this.http.post<Blob>(`${this.API}/baixarExcel`, { ...data }, { 
    responseType: 'blob' as 'json',
    observe: 'response' // 关键配置：获取包含响应头的完整响应对象
  });
}

2. 后端配置响应头暴露 #

如果是跨域请求，后端需要在响应中添加Access-Control-Expose-Headers头，允许前端访问Content-Disposition：

Access-Control-Expose-Headers: Content-Disposition

（具体实现根据后端技术栈调整，比如Spring Boot可通过@CrossOrigin注解或全局配置完成）

3. 组件中提取文件名并修正下载逻辑 #

现在res是完整的HttpResponse对象，可从res.headers中提取文件名，同时下载时要使用res.body作为Blob数据源：

onDownloadRelatorioArquivos() {
  this.loading = true;

  this.service.downloadRelatorioArquivos(this.form.value).subscribe({
    next: (res: HttpResponse<Blob>) => {
      console.log(res.headers); // 现在可正常获取响应头
      this.loading = false;
      // 从Content-Disposition头提取文件名
      const contentDisposition = res.headers.get('Content-Disposition');
      let fileName = `RELATÓRIO_ARQUIVOS${this.form.value.data}.xlsx`;
      if (contentDisposition) {
        const matches = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
        if (matches != null && matches[1]) {
          fileName = decodeURIComponent(matches[1].replace(/['"]/g, ''));
        }
      }
      this.download(res.body!, fileName);
    },
    error: () => this.loading = false
  });
}

private download(blob: Blob, nomenclatura: string){
  const a = document.createElement('a');
  a.download = nomenclatura;
  a.href = window.URL.createObjectURL(blob);
  a.click();
  // 释放URL对象资源，避免内存泄漏
  window.URL.revokeObjectURL(a.href);
}

关键说明 #

• observe: 'response'是获取完整响应对象的核心配置，默认情况下HttpClient仅返回响应体。
• 跨域场景下必须通过后端暴露Content-Disposition头，否则前端无法读取该头信息。
• 提取文件名时使用正则解析Content-Disposition，同时通过decodeURIComponent处理编码问题。

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