NestJS+Vite+React：POST请求无法设置Cookie的原因及解决方法

问题描述 #

我在使用NestJS开发项目时遇到一个问题：用@Get()装饰的接口能正常在Chrome浏览器Application面板的Cookies存储中写入Cookie，但将接口改为@Post()装饰后，Cookie就无法写入了。

前端Axios发送POST请求的代码：

try {
  const response = await axios.post(
    `http://localhost:3000/api/v1/hello`,
    user,
    {
      method: 'post',
      headers: {
        withCredentials: true,
      },
      data: user,
    },
  );
  if (response.data) {
    // 后续逻辑
  }
} catch (err) {
  if (err instanceof AxiosError) {
    if (err.response) {
      toast.error(err.response.data.message);
    }
  }
}

NestJS的main.js配置：

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.setGlobalPrefix('api/v1');
  app.useGlobalPipes(new ValidationPipe());
  app.use(cookieParser());
  app.enableCors({ origin: 'http://127.0.0.1:5173', credentials: true });
  await app.listen(3000);
}
bootstrap();

问题原因 #

1. Axios配置错误：withCredentials是请求配置的顶级属性，不是放在headers里的。POST请求时这个配置未生效，导致浏览器拒绝接收跨域Cookie。
2. 预检请求处理：POST属于非简单请求，浏览器会先发送OPTIONS预检请求，若服务器未在预检响应中正确返回CORS头，后续POST请求的Cookie无法被写入。

解决方法 #

1. 修正Axios请求配置 #

将withCredentials移到配置顶层，同时删除冗余的method和data参数（axios.post已默认指定POST方法，第二个参数就是请求体）：

try {
  const response = await axios.post(
    `http://localhost:3000/api/v1/hello`,
    user,
    {
      withCredentials: true, // 放在配置顶层，而非headers内
    },
  );
  if (response.data) {
    // 后续逻辑
  }
} catch (err) {
  if (err instanceof AxiosError) {
    if (err.response) {
      toast.error(err.response.data.message);
    }
  }
}

2. 完善NestJS的CORS配置 #

明确指定允许的请求方法和头信息，确保OPTIONS预检请求能正确响应：

app.enableCors({
  origin: 'http://127.0.0.1:5173',
  credentials: true,
  allowedHeaders: ['Content-Type', 'Authorization'],
  methods: ['GET', 'POST', 'OPTIONS'], // 显式允许预检请求方法
});

3. 检查接口的Cookie设置逻辑 #

确保POST接口的Cookie设置代码与GET接口一致，注意使用@Res()时需开启passthrough: true：

import { Controller, Post, Res } from '@nestjs/common';
import { Response } from 'express';

@Controller()
export class HelloController {
  @Post('hello')
  setCookie(@Res({ passthrough: true }) res: Response) {
    res.cookie('token', 'your-token-value', {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production', // 生产环境启用secure
      sameSite: 'lax', // 根据业务需求选择strict/lax/none（none需配合secure）
      maxAge: 3600000, // Cookie有效期1小时
    });
    return { message: 'Cookie设置成功' };
  }
}

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