Remix无法使用gzip解码外部端点数据问题求助

问题原因 #

Remix服务端基于Node.js环境运行，而Node.js的fetch API（包括原生实现和node-fetch）默认不会自动解码带有content-encoding: gzip的响应——浏览器环境的fetch会自动处理这类压缩数据，但服务端不会，直接解析压缩的二进制数据就会触发"无效JSON"的错误。

解决方案 #

Remix没有专门的配置项处理gzip解码，需要手动在请求函数中完成解码操作，以下是两种可行实现：

方式一：流式解码（适合大数据场景）

利用Node.js内置的zlib和流API处理压缩数据，避免内存占用过高：

import { createGunzip } from "zlib";
import { json } from "@remix-run/node";

async function gzippedEndpoint() {
  const response = await fetch("https://dev.server.com/public/v1/endpoint", {
    headers: {
      "Accept-Encoding": "gzip", // 明确告知服务端接受gzip编码
    },
  });

  if (!response.ok) {
    throw new Error(`请求失败：${response.status}`);
  }

  const contentEncoding = response.headers.get("content-encoding");
  if (contentEncoding === "gzip") {
    // 创建解压缩流并处理响应体
    const gunzip = createGunzip();
    const stream = response.body.pipe(gunzip);
    
    // 将流转换为字符串后解析JSON
    let rawData = "";
    for await (const chunk of stream) {
      rawData += chunk.toString();
    }
    return JSON.parse(rawData);
  } else {
    // 非压缩数据直接解析
    return response.json();
  }
}

方式二：同步解码（适合小数据场景）

使用同步解压缩方法，代码更简洁：

import { gunzipSync } from "zlib";
import { json } from "@remix-run/node";

async function gzippedEndpoint() {
  const response = await fetch("https://dev.server.com/public/v1/endpoint", {
    headers: {
      "Accept-Encoding": "gzip",
    },
  });

  if (!response.ok) {
    throw new Error(`HTTP错误：${response.status}`);
  }

  const buffer = await response.arrayBuffer();
  const contentEncoding = response.headers.get("content-encoding");
  
  if (contentEncoding === "gzip") {
    const decompressedStr = gunzipSync(Buffer.from(buffer)).toString();
    return JSON.parse(decompressedStr);
  } else {
    return response.json();
  }
}

注意事项 #

• 必须在请求头中添加Accept-Encoding: gzip，虽然当前服务端已返回gzip编码，但显式声明能保证兼容性，避免服务端后续变更编码策略
• 根据返回数据大小选择解码方式：大数据优先用流式处理，小数据用同步方式更高效

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