使用Nuxt+Uppy上传图片至AdonisJS后端遇UND_ERR_REQ_CONTENT_LENGTH_MISMATCH错误

UND_ERR_REQ_CONTENT_LENGTH_MISMATCH是undici（Nuxt的$fetch底层依赖）抛出的错误，核心原因是你手动设置的content-length请求头数值，和实际发送给后端的请求体字节长度不匹配。下面是具体的调试方向和修复方案：

调试步骤 #

• 验证请求体长度一致性：在读取raw body后，立即打印实际字节长度和请求头里的content-length值，确认两者是否相等：

  const body = await readRawBody(event)
  const length = getHeader(event, 'content-length') as string
  console.log('Body length:', body.length, 'Header length:', Number(length))
  

  如果数值不一致，说明请求到达Nuxt时，请求体已经被修改（比如中间件解析、编码转换），或者content-length头本身就不准确。
• 排查Nuxt中间件干扰：检查是否有其他server目录下的中间件对multipart/form-data请求做了解析或修改操作，这类操作可能会篡改原始请求体，导致长度不匹配。
• 跳过手动设置content-length：暂时移除代码中手动设置的content-length头，观察错误是否消失。因为undici会自动计算请求体的字节长度并设置该头，手动传入反而容易出错。

修复方案 #

方案1：移除手动设置的content-length #

直接删除请求头中的content-length配置，让$fetch自动处理：

// server/api/images.post.ts
export default defineEventHandler(async (event) => {
  const body = await readRawBody(event)
  const content = getHeader(event, 'content-type') as string

  const { context: { params } } = event

  return await $fetch<{ message: string }>(`/categories/${params?.id}/images`, {
    baseURL,
    method: 'POST',
    headers: {
      'content-type': content,
      // 移除手动设置的content-length
    },
    body,
    onRequestError(context) {
      console.log('==== onRequestError', context.error)
    }
  })
})

方案2：解析FormData后重新转发（更可靠） #

对于multipart/form-data请求，直接转发raw body容易出现编码或边界符问题，建议用Nuxt提供的useMultipartFormData解析后再重新构建请求：

// server/api/images.post.ts
export default defineEventHandler(async (event) => {
  const formData = await useMultipartFormData(event)
  const { context: { params } } = event

  return await $fetch<{ message: string }>(`/categories/${params?.id}/images`, {
    baseURL,
    method: 'POST',
    body: formData, // 自动处理content-type和content-length
    onRequestError(context) {
      console.log('==== onRequestError', context.error)
    }
  })
})

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