Next.js 13.4.19 API接口报错UND_ERR_REQ_CONTENT_LENGTH_MISMATCH求解决

问题描述 #

在Next.js 13.4.19版本中，通过/pages/api/hello.ts创建最简API接口，代码如下：

import { NextApiRequest, NextApiResponse } from 'next';

export default (req: NextApiRequest, res: NextApiResponse) => {
    res.status(200).json({ text: 'Hello' });
};

错误信息 #

运行时触发以下报错：

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at async invokeRequest (C:\Users\gyurisc\dev\projects\audio-genie\node_modules\next\dist\server\lib\server-ipc\invoke-request.js:17:12)
    at async invokeRender (C:\Users\gyurisc\dev\projects\audio-genie\node_modules\next\dist\server\lib\router-server.js:254:29)
    at async requestHandler (C:\Users\gyurisc\dev\projects\audio-genie\node_modules\next\dist\server\lib\router-server.js:475:24)
    at async Server.<anonymous> (C:\Users\gyurisc\dev\projects\audio-genie\node_modules\next\dist\server\lib\start-server.js:117:13) {
  cause: RequestContentLengthMismatchError: Request body length does not match content-length header
      at write (C:\Users\gyurisc\dev\projects\audio-genie\node_modules\next\dist\compiled\undici\index.js:1:67105)
      at _resume (C:\Users\gyurisc\dev\projects\audio-genie\node_modules\next\dist\compiled\undici\index.js:1:66726)
      at resume (C:\Users\gyurisc\dev\projects\audio-genie\node_modules\next\dist\compiled\undici\index.js:1:65413)
      at connect (C:\Users\gyurisc\dev\projects\audio-genie\node_modules\next\dist\compiled\undici\index.js:1:65301) {
    code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
  }
}

原因分析 #

报错核心是UND_ERR_REQ_CONTENT_LENGTH_MISMATCH，即请求体长度与Content-Length响应头不匹配。这是Next.js 13.4.19版本中内置的undici库（用于处理内部请求）存在的已知bug，在Pages Router的API路由场景下会触发该问题；另外开发环境缓存、依赖版本冲突也可能引发类似异常。

修复方案 #

方案一：升级Next.js版本（推荐） #

官方在13.4.20及以上版本中修复了该undici相关的请求头计算问题，执行以下命令升级：

npm install next@latest
# 或使用yarn
yarn add next@latest

方案二：显式设置Content-Length头 #

如果暂时无法升级版本，可以在API路由中手动计算并设置响应的Content-Length头，修改代码如下：

import { NextApiRequest, NextApiResponse } from 'next';

export default (req: NextApiRequest, res: NextApiResponse) => {
  const responseData = { text: 'Hello' };
  const jsonStr = JSON.stringify(responseData);
  // 计算JSON字符串的字节长度
  res.setHeader('Content-Length', Buffer.byteLength(jsonStr));
  res.status(200).json(responseData);
};

方案三：清除缓存并重启服务 #

删除项目根目录下的.next文件夹，然后重新启动开发服务器：

rm -rf .next # Windows系统使用 rd /s /q .next
npm run dev

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