如何用Nuxt 3 Server作为带FormData的透传API隐藏外部端点

你的核心问题是不要解析请求体，直接透传原始multipart/form-data流到外部服务，因为readMultipartFormData和readBody都会破坏原始请求的格式结构。以下是直接可行的修改方案：

前端代码（无需修改） #

你的pages.vue中的提交逻辑是正确的，$fetch会自动处理FormData的Content-Type（包含boundary），无需额外配置：

async function onSubmit() {
  const formData = new FormData();
  for (let file of form.files) {
    formData.append("image", file);
  }

  await $fetch("/api/send", {
    method: "POST",
    body: formData
  });
}

服务端API修改（/server/api/send.js） #

直接传递原始请求流和请求头，避免解析请求体：

export default defineEventHandler(async (event) => {
  const { method } = event.node.req;
  // 获取原始请求头，保留multipart/form-data的boundary信息
  const originalHeaders = getRequestHeaders(event);

  // 过滤并整理需要转发的请求头
  const forwardHeaders = { ...originalHeaders };
  // 移除可能导致冲突的头字段（根据外部服务需求调整）
  delete forwardHeaders.host;
  delete forwardHeaders.connection;
  // 如果外部服务需要额外授权头，可在此添加
  // forwardHeaders.Authorization = "Bearer YOUR_TOKEN";

  // 直接透传原始请求流，不解析请求体
  const response = await $fetch.raw("https://你的外部服务地址", {
    method,
    headers: forwardHeaders,
    body: event.node.req, // 传入原始请求流
    parseResponse: false // 禁用自动解析，保证响应原样返回
  });

  return response._data;
});

关键说明 #

1. 为什么直接传请求流？
   multipart/form-data请求的核心是带boundary分隔符的二进制流，一旦用readMultipartFormData解析后，再重新构造FormData会丢失原始boundary信息，导致外部服务无法正确解析文件。直接传递原始请求流能保证格式完全一致。

2. 注意事项

   • Nuxt默认不会自动解析multipart请求体，所以event.node.req是未被处理的原始流，可直接使用。
   • 根据外部服务的要求，调整forwardHeaders，比如移除或添加特定头字段。
   • 测试时可直接用Postman调用/api/send上传文件，验证外部服务是否能正确接收，快速定位问题。

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