使用Nuxt的useFetch()无法POST数据至NestJS API的问题

核心问题定位 #

你遇到的400错误大概率是请求体数据格式不符导致的：Nuxt中defineModel返回的是响应式Ref对象，直接传入useFetch的body时，实际发送的是Ref对象而非原始字符串值，NestJS的class-validator校验不通过，因此返回Bad Request。另外，错误信息无法获取可能和NestJS的异常处理配置或Nuxt的错误捕获逻辑有关。

分步解决方案 #

1. 修复Nuxt请求体的响应式值问题 #

修改login.vue中的请求体，将Ref对象转为原始值：

const login = async () => {
  const { data, error } = await useFetch('/auth/login', {
    method: "POST",
    baseURL: "http://localhost:3001",
    body: {
      email: email.value, // 必须加.value获取原始字符串
      password: password.value // 必须加.value获取原始字符串
    }
  })
        
  // 捕获并打印错误信息
  if (error.value) {
    console.error('登录错误:', error.value.data)
  }
  console.log(data.value)
}

2. 确保NestJS返回校验错误信息 #

如果使用了@Res()装饰器，需要配置全局ValidationPipe保证错误信息能正常返回。在main.ts中添加或修改配置：

import { ValidationPipe, BadRequestException } from '@nestjs/common';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  
  app.useGlobalPipes(new ValidationPipe({
    whitelist: true, // 自动移除DTO中未定义的字段
    transform: true, // 自动将请求体转为DTO实例
    exceptionFactory: (validationErrors) => {
      // 格式化校验错误，方便前端接收
      const errors = validationErrors.map(err => ({
        field: err.property,
        messages: Object.values(err.constraints || {})
      }));
      return new BadRequestException({ code: 400, errors });
    }
  }));
  
  await app.listen(3001);
}
bootstrap();

3. 可选：配置Nuxt代理避免跨域隐性问题 #

开发环境中如果存在跨域相关的隐藏问题，可以在nuxt.config.ts中配置代理：

export default defineNuxtConfig({
  nitro: {
    devProxy: {
      '/auth': {
        target: 'http://localhost:3001',
        changeOrigin: true
      }
    }
  }
})

之后请求无需指定baseURL，直接写路径即可：

const { data, error } = await useFetch('/auth/login', {
  method: "POST",
  body: {
    email: email.value,
    password: password.value
  }
})

4. 验证请求格式（可选） #

手动指定Content-Type请求头，避免潜在的格式识别问题：

const { data, error } = await useFetch('/auth/login', {
  method: "POST",
  baseURL: "http://localhost:3001",
  headers: {
    'Content-Type': 'application/json'
  },
  body: {
    email: email.value,
    password: password.value
  }
})

验证步骤 #

1. 重启NestJS和Nuxt服务
2. 输入正确/错误的登录信息，查看控制台是否能打印出错误信息
3. 检查网络请求的Payload，确认发送的是原始字符串而非Ref对象

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