Next.js 13.4.2 API路由设置Cookie失败，求解决方案

一、使用NextResponse的正确实现（App Router） #

针对app/api/signin/route.ts的路由场景，直接通过NextResponse操作Cookie是官方推荐方式，以下是完整示例：

import { NextResponse } from 'next/server';
import jwt from 'jsonwebtoken';

export async function POST(request: Request) {
  const { username, password } = await request.json();

  // 替换为你的实际用户身份验证逻辑
  const isValidUser = username === 'admin' && password === '123456';
  if (!isValidUser) {
    return NextResponse.json(
      { success: false, message: '用户名或密码错误' },
      { status: 401 }
    );
  }

  // 生成JWT令牌
  const token = jwt.sign(
    { userId: 1, username },
    process.env.JWT_SECRET!,
    { expiresIn: '1d' }
  );

  // 创建响应并设置HttpOnly Cookie
  const response = NextResponse.json({ success: true, message: '登录成功' });
  
  response.cookies.set({
    name: 'token',
    value: token,
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production', // 生产环境必须开启，本地开发禁用
    sameSite: 'strict', // 根据业务需求可调整为'lax'
    path: '/', // 确保全站路由可访问该Cookie
    maxAge: 24 * 60 * 60, // 有效期1天
  });

  return response;
}

关键注意事项 #

• 必须返回设置了Cookie的NextResponse实例，直接返回NextResponse.json()不会携带Cookie
• secure参数：本地HTTP环境下设为true会被浏览器拦截，生产HTTPS环境必须开启
• path设为/避免Cookie仅在/api/signin路径下生效

二、使用cookies-next的兼容实现 #

如果坚持使用cookies-next，需注意App Router下必须传入req和res参数：

import { setCookie } from 'cookies-next';
import { NextResponse } from 'next/server';
import jwt from 'jsonwebtoken';

export async function POST(request: Request) {
  const { username, password } = await request.json();

  const isValidUser = username === 'admin' && password === '123456';
  if (!isValidUser) {
    return NextResponse.json({ success: false }, { status: 401 });
  }

  const token = jwt.sign(
    { userId: 1 },
    process.env.JWT_SECRET!,
    { expiresIn: '1d' }
  );

  const response = NextResponse.json({ success: true });
  
  setCookie('token', token, {
    req: request,
    res: response,
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'strict',
    path: '/',
    maxAge: 24 * 60 * 60,
  });

  return response;
}

三、常见排查点 #

• 检查浏览器控制台Application → Cookies，确认Cookie是否被拦截
• 本地开发时关闭浏览器"阻止第三方Cookie"选项
• 查看Network面板的响应头，确认Set-Cookie字段是否存在
• 验证JWT_SECRET环境变量是否正确配置，JWT令牌生成是否成功

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