如何在Next.js（服务端）+Express.js后端中正确处理Cookie？

前端无法访问Cookie #

如果是需要前端读取的非敏感Cookie，需确保httpOnly设为false；如果是仅后端使用的安全认证Cookie，前端本就不应直接访问，只需确保请求自动携带即可。核心配置要点：

• 生产环境必须开启secure: true（仅HTTPS传输）
• 跨域场景下sameSite设为none，需配合secure: true使用
• 正确设置domain，需与前端域名同主域（如前端app.example.com、后端api.example.com，则domain: '.example.com'）
• path设为/确保全站有效

Express设置Cookie示例：

// 登录成功时设置Cookie
res.cookie('auth_token', jwtToken, {
  httpOnly: true, // 敏感令牌建议设为true，禁止前端读取
  secure: process.env.NODE_ENV === 'production',
  sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
  domain: process.env.NODE_ENV === 'production' ? '.example.com' : undefined,
  maxAge: 24 * 60 * 60 * 1000,
  path: '/'
});

登出操作无法正确清除Cookie #

清除Cookie时必须与设置时的参数完全一致（domain、path、httpOnly、secure、sameSite），否则浏览器不会执行删除操作。

Express登出清除Cookie示例：

// 登出接口逻辑
app.post('/logout', (req, res) => {
  res.clearCookie('auth_token', {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
    domain: process.env.NODE_ENV === 'production' ? '.example.com' : undefined,
    path: '/'
  });
  res.status(200).json({ message: '登出成功' });
});

Next.js中间件无法获取认证Cookie #

需确保三个环节配置正确：

1. Express端CORS配置：允许携带凭证

const cors = require('cors');
app.use(cors({
  origin: 'https://app.example.com', // 生产环境指定前端域名
  credentials: true // 必须开启，允许Cookie跨域传输
}));

2. Next.js前端请求配置：发起请求时携带凭证

// 前端登录/接口请求示例
fetch('https://api.example.com/login', {
  method: 'POST',
  credentials: 'include', // 跨域场景用include，同域用same-origin
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username, password })
});

3. Next.js中间件读取Cookie：直接通过request.cookies获取

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const authToken = request.cookies.get('auth_token')?.value;
  
  // 未登录跳转登录页
  if (!authToken && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  
  return NextResponse.next();
}

// 指定需要拦截的路由
export const config = {
  matcher: ['/dashboard/:path*'],
};

额外注意事项 #

• 生产环境必须使用HTTPS，否则secure: true的Cookie无法被浏览器保存
• 本地开发时可暂时关闭secure和domain，避免配置冲突
• 若使用Next.js App Router，确保路由组或布局不会影响Cookie传递

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