使用HttpClient.get获取ZIP附件报错，Chrome网络请求正常求助

算力阿峰

2026-5-22

解决HttpClient.get下载ZIP文件返回错误的问题

嘿，我一眼就看到你代码里的关键问题了——你把responseType放到headers对象里了！这完全不对，responseType是HttpClient请求选项的顶级配置属性，根本不属于headers的一部分，这大概率就是你请求失败的核心原因。

先给你修正后的完整代码：

const userUri = this.userEnv + 'api/Upload/Download?fileID=' + fileIDResponse; 
// 正确的配置方式：responseType独立于headers存在
const userHttpOptions = { 
  headers: new HttpHeaders({ 'Authorization': 'Basic ' + this.authToken }),
  responseType: 'blob' as 'json' // 加类型断言绕过TypeScript的类型限制
}; 

this.http.get(userUri, userHttpOptions).subscribe({
  next: (blob: Blob) => {
    // 这里可以添加处理下载的逻辑，比如生成下载链接
    const downloadUrl = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.download = `file-${fileIDResponse}.zip`; // 自定义文件名
    document.body.appendChild(link);
    link.click();
    // 清理资源
    window.URL.revokeObjectURL(downloadUrl);
    document.body.removeChild(link);
  },
  error: (error) => {
    console.error('下载失败详情:', error);
  }
});

额外需要注意的细节：

你的代码最后写的是userHttpOpti...，要确保变量名拼写完全正确（比如应该是userHttpOptions），笔误也会导致请求失败。
为什么要加as 'json'？因为TypeScript的类型系统默认HttpClient的responseType是'json'，当我们指定为'blob'时，需要用类型断言来避免类型报错，你也可以用responseType: 'blob' as const来替代。
检查后端返回的Content-Type响应头是否正确，应该是application/zip或者application/octet-stream，如果后端返回的是其他类型，可能会影响blob的解析。
如果你的请求涉及跨域重定向，需要确认后端已经配置了正确的CORS规则，允许相关头部和重定向行为。