Angular下载zip文件报200状态HTTP解析错误求助

根因说明 #

这个报错和你猜测的type配置直接相关：Angular内置HttpClient默认将所有响应按application/json格式做反序列化解析，而你的下载接口返回的是Zip格式二进制流，框架强行把二进制内容当JSON解析，自然会在状态码200的情况下抛出解析失败错误。

修复步骤 #

• 第一步：修改Service层请求配置，明确指定响应类型为二进制Blob
  你原来的请求没有声明响应类型，走了默认JSON解析逻辑，需要在请求配置中增加responseType: 'blob'参数，告诉HttpClient跳过JSON解析，直接返回Blob格式的响应体。修正后的Service代码如下：

  getDownloadZip(): Observable<Blob>  {
    const url = `${this._URL_SERVICE}/result`;
    // 在原有httpOptions基础上增加responseType配置，as const用于解决TS类型校验问题
    const reqOptions = {
      ...this.httpOptions,
      responseType: 'blob' as const
    };
    // 注意：指定blob响应类型后不需要再写Array<any>的泛型，返回值天然是Blob类型
    return this.http.get(url, reqOptions).pipe(retry(1), catchError(this.handleError));
  }
  

• 第二步：修正业务层下载逻辑，修正方法名错误
  你现有TS代码有两个问题：一是调用的方法名和Service里定义的下载方法不匹配（Service写的是getDownloadZip，调用时写的是getServicosCSV）；二是当请求正确配置responseType: 'blob'后，接口返回值本身就是Blob对象，不需要再手动用new Blob二次包裹。修正后的代码如下：

  downloadZip() {
    this.servicosApiService
      .getDownloadZip() // 修正为正确的Service方法名
      .subscribe((res: Blob) => {
        // 直接用返回的Blob生成临时URL，不需要重复构造Blob
        const blobUrl = window.URL.createObjectURL(res);
        const link = document.createElement('a');
        link.href = blobUrl;
        link.download = 'report.zip';
        link.click();
        // 释放临时URL资源
        window.URL.revokeObjectURL(blobUrl);
        link.remove();
    })
  }
  

额外排查点 #

• 检查项目里的全局HTTP拦截器有没有给所有请求默认加responseType: 'json'的配置，如果有需要针对这个下载接口做覆盖
• 如果改完配置后下载的Zip包提示损坏，先确认后端接口响应头的Content-Type是否为application/zip，如果后端未正确设置响应头，可以在生成Blob时手动指定类型：

  const file = new Blob([res], { type: 'application/zip' });
  

• 不要在请求的observe配置里选默认的body以外的类型，否则会拿不到完整的Blob对象

内容的提问来源于stack exchange，提问作者João