如何在Angular中兼容ASP.NET Core Web API的Zip与JSON双响应类型

咱们先把问题点透：你现在Angular请求固定了responseType: "arraybuffer"，导致后端返回的JSON也被强制转成ArrayBuffer，没法直接解析。要同时处理两种响应，得靠后端给前端传标识，前端根据标识动态处理，下面是具体的实现步骤：

一、后端（ASP.NET Core）调整 #

先修改API的响应逻辑，在返回JSON时添加一个自定义响应头，明确告诉前端当前响应类型；同时保证Zip文件的Content-Type正确：

if(condition == true ) { 
    // 返回Zip文件，指定正确的Content-Type
    return File(zipBytes, "application/zip", "Data.zip"); 
} else { 
    // 返回JSON时，添加自定义响应头标记类型
    var jsonResponse = Json(new Response { Code=111,Data= JsonConvert.SerializeObject(myList)});
    jsonResponse.Headers.Add("X-Response-Type", "json");
    return jsonResponse;
}

二、前端（Angular 6）调整 #

接下来修改Angular的请求逻辑，不再只返回响应体，而是拿到完整的响应对象（包含响应头），再根据标识判断处理方式：

1. 修改请求方法 #

调整请求配置，开启observe: "response"来获取完整响应：

postWithZip(path: string, body: Object = {}): Observable<HttpResponse<ArrayBuffer>> { 
    return this.http 
        .post(`${path}`, JSON.stringify(body), { 
            headers: this.setHeaders({ multipartFormData: false, zipOption: true }), 
            responseType: "arraybuffer",
            observe: "response" // 关键：获取包含头信息的完整响应
        }) 
        .catch(this.formatErrors); 
}

2. 调用请求并处理两种响应 #

在订阅请求时，根据响应头的标识区分Zip和JSON：

this.yourService.postWithZip('/api/your-endpoint', requestBody).subscribe(
    (response: HttpResponse<ArrayBuffer>) => {
        // 通过响应头判断类型
        const customType = response.headers.get('X-Response-Type');
        const contentType = response.headers.get('Content-Type');

        if (contentType === 'application/zip') {
            // 处理Zip文件：转Blob并触发下载
            const blob = new Blob([response.body], { type: 'application/zip' });
            const url = window.URL.createObjectURL(blob);
            const downloadLink = document.createElement('a');
            downloadLink.href = url;
            downloadLink.download = 'Data.zip';
            document.body.appendChild(downloadLink);
            downloadLink.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(downloadLink);
        } else if (customType === 'json' || contentType?.includes('application/json')) {
            // 处理JSON：把ArrayBuffer转成字符串再解析
            const decoder = new TextDecoder('utf-8');
            const jsonStr = decoder.decode(response.body);
            const jsonData = JSON.parse(jsonStr);
            // 弹窗展示JSON，这里用原生alert示例，你也可以换成Angular组件弹窗
            alert(JSON.stringify(jsonData, null, 2));
        }
    },
    (error) => {
        console.error('请求失败:', error);
    }
);

三、跨域场景额外配置 #

如果你的API和Angular项目不在同一域名，需要在ASP.NET Core的CORS配置中暴露自定义响应头，否则前端拿不到X-Response-Type：

services.AddCors(options =>
{
    options.AddPolicy("AllowCrossDomain",
        builder =>
        {
            builder.AllowAnyOrigin()
                   .AllowAnyMethod()
                   .AllowAnyHeader()
                   .WithExposedHeaders("X-Response-Type"); // 暴露自定义头
        });
});

这样就能完美兼容两种响应场景了，前端可以自动识别并处理Zip下载或JSON弹窗展示。

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