Chrome与Angular2中POST请求HTTP响应显示不一致的问题咨询

嗨，我来帮你理清这个问题的来龙去脉～

1. 真实响应类型到底是二进制还是JSON？ #

真实的响应确实是二进制格式——Chrome的Network标签展示的是服务器返回的原始响应内容，没有经过任何客户端处理。而你在控制台看到的JSON，是Angular HttpClient的默认行为搞的鬼：它会自动检测响应的Content-Type头，如果是application/json，就会把二进制形式的JSON字符串（本质是UTF-8编码的字节）解析成JavaScript对象，所以控制台输出的是解析后的最终结果，不是原始响应。

2. 怎么保存二进制内容？ #

要获取并保存原始二进制数据，你需要在请求配置里明确禁用自动解析，指定responseType为'blob'或者'arraybuffer'。修改后的代码示例如下：

this.http.post(<你的配置>, { responseType: 'blob' })
  .subscribe((response: Blob) => {
    console.log(response); // 现在这里是Blob类型的原始二进制数据
    // 生成下载链接保存文件
    const downloadUrl = window.URL.createObjectURL(response);
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.download = 'your-file-name.ext'; // 替换成你需要的文件名和后缀
    document.body.appendChild(link);
    link.click();
    // 清理临时URL
    window.URL.revokeObjectURL(downloadUrl);
    document.body.removeChild(link);
  });

如果需要操作更底层的字节数组，把responseType改成'arraybuffer'就可以了。

3. 为什么Chrome中显示会有差异？ #

这个差异完全是客户端处理阶段不同导致的：

• Network标签：直接展示服务器发送的原始字节流，是未经过任何解析的“原汁原味”的响应，所以你看到的是二进制格式。
• 控制台：输出的是Angular HttpClient处理后的结果。默认情况下，HttpClient会根据响应头的Content-Type自动转换响应格式——只要服务器返回的Content-Type标记为application/json，它就会自动把二进制的JSON字符串解析成JS对象，所以控制台显示的是解析后的JSON结构。

简单总结：原始响应是服务器返回的二进制数据，控制台的JSON是Angular帮你解析后的产物，两者是同一内容的不同表现形式。

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