Angular中获取GET请求Header问题：无法获取Blob接口返回的文件名Header

我来帮你搞定这个问题！你遇到的res.headers为undefined的核心原因有两个：一是你的HttpClient请求没有配置为获取完整的响应对象，二是后端可能没有通过CORS允许暴露包含文件名的响应头。下面是分步解决方案：

1. 修改Angular服务代码，获取完整响应对象 #

默认情况下，HttpClient.get()只返回响应体（这里是Blob），不会包含headers信息。你需要设置observe: 'response'选项，让它返回完整的HttpResponse<Blob>对象，这样就能访问headers了：

// service.ts
import { Observable, HttpResponse } from '@angular/common/http';

public openFile(path): Observable<HttpResponse<Blob>> {
  const url = '/download/';
  const pathFile = new HttpParams().set('pathFile', path);
  return this.httpClient.get(url, {
    params: pathFile,
    responseType: 'blob',
    observe: 'response' // 关键配置：获取包含headers的完整响应
  });
}

2. 在组件中解析响应头里的文件名 #

现在调用服务时，你可以从HttpResponse对象中直接获取headers，然后解析出文件名（通常后端会把文件名放在Content-Disposition响应头里）：

// component.ts
this.yourService.openFile('目标文件路径').subscribe({
  next: (response) => {
    // 现在可以正常打印响应头了
    console.log('完整响应头:', response.headers);
    
    // 解析Content-Disposition头提取文件名
    const contentDisposition = response.headers.get('Content-Disposition');
    let filename = '未知文件';
    if (contentDisposition) {
      // 适配带引号和不带引号的文件名格式
      const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
      if (filenameMatch && filenameMatch[1]) {
        filename = filenameMatch[1].replace(/['"]/g, '');
      }
    }
    
    console.log('解析到的文件名:', filename);
    
    // 可选：用解析出的文件名触发文件下载
    const blob = response.body;
    const downloadUrl = window.URL.createObjectURL(blob);
    const aTag = document.createElement('a');
    aTag.href = downloadUrl;
    aTag.download = filename;
    document.body.appendChild(aTag);
    aTag.click();
    window.URL.revokeObjectURL(downloadUrl);
    document.body.removeChild(aTag);
  },
  error: (err) => {
    console.error('文件请求出错:', err);
  }
});

3. 后端配置CORS暴露响应头 #

这一步是关键！浏览器的CORS策略默认只允许前端访问少数"简单响应头"，像Content-Disposition这类自定义/非标准头需要后端显式配置暴露。你需要让后端在响应中添加Access-Control-Expose-Headers头，指定要暴露的字段：

举几个常见后端的配置示例：

• Spring Boot（Java）：

  @GetMapping("/download")
  public ResponseEntity<Resource> downloadFile(@RequestParam String pathFile) {
    // 逻辑：获取文件资源...
    HttpHeaders headers = new HttpHeaders();
    headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"test.pdf\"");
    // 关键：暴露Content-Disposition给前端
    headers.add("Access-Control-Expose-Headers", HttpHeaders.CONTENT_DISPOSITION);
    return new ResponseEntity<>(resource, headers, HttpStatus.OK);
  }
  

• Node.js（Express）：

  app.get('/download', (req, res) => {
    // 逻辑：处理文件读取...
    res.setHeader('Content-Disposition', 'attachment; filename="test.pdf"');
    // 关键：暴露Content-Disposition头
    res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition');
    // 发送文件流...
  });
  

完成以上三步后，你就能正常获取到响应头里的文件名了！

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