如何在现代浏览器中无需第三方库获取并解析json.gz文件？

为什么你的JSONP方案无效 #

你之前的JSONP思路存在本质问题：JSONP要求服务器返回包裹JSON的JavaScript代码（比如parseResponse({"abc":1})），但你的41925.json.gz是纯JSON的gzip压缩包，并非合法的JS脚本，所以浏览器会报MIME类型错误——它把gzip文件当成JS加载，自然不兼容。

正确的实现方案（推荐用XHR/Fetch） #

无需使用JSONP，直接用现代浏览器支持的fetch或XMLHttpRequest请求，配合后端设置正确响应头，浏览器会自动完成解压并解析为JS对象。

1. 后端必须配置的响应头 #

• Content-Type: application/json：告知浏览器返回内容为JSON格式
• Content-Encoding: gzip：明确标记内容是gzip压缩的，触发浏览器自动解压
• （跨域场景必填）Access-Control-Allow-Origin: *：允许跨域请求访问

2. 前端Fetch代码示例 #

fetch('http://localhost:8080/41925.json.gz')
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.json(); // 浏览器自动解压后解析为JS对象
  })
  .then(data => {
    console.log(data); // 输出 {abc: 1}
    parseResponse(data); // 调用你的处理函数
  })
  .catch(err => console.error(err));

3. 前端XHR代码示例 #

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/41925.json.gz');
xhr.responseType = 'json';
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    const data = xhr.response; // 自动解压并解析为对象
    console.log(data);
    parseResponse(data);
  } else {
    console.error('请求失败');
  }
};
xhr.send();

若因跨域必须用类JSONP方式（不推荐） #

如果只能依赖JSONP模式跨域，后端需要额外处理：

1. 先将原始JSON包裹为回调函数格式：parseResponse({"abc":1})
2. 对这段JS代码进行gzip压缩
3. 后端设置响应头：
   • Content-Type: application/javascript
   • Content-Encoding: gzip
     此时浏览器加载gzip文件时会先解压，再执行JS代码自动调用parseResponse。但这种方式仅支持GET请求，灵活性远不如Fetch/XHR，不建议使用。

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