Next.js 14对接Express.js登录后Cookie无法存储的问题

我正在开发基于Next.js 14的应用，后端采用Express.js。登录验证通过后生成JWT令牌并尝试通过res.cookie()设置Cookie，但浏览器的Cookie存储里找不到authToken，且Network请求的响应头中也没有Set-Cookie字段。

后端（Express.js）配置 #

登录路由及Cookie设置代码如下：

export const login = async (req, res) => {
  try {
    const { email, password } = req.body;

    // 用户验证逻辑
    const user = await AuthService.login(email, password);

    // 生成JWT令牌
    const token = generateToken({ id: user._id, email: user.email });

    // 设置Cookie
    setTokenCookie(res, token);

    res.status(200).json({
      status: 200,
      success: true,
      message: 'Login successful',
      user: user,
    });
  } catch (error) {
    res.status(400).json({ error: 'Login failed' });
  }
};

const setTokenCookie = (res, token) => {
  const cookieOptions = {
    httpOnly: true, // Cookie无法通过JavaScript访问
    secure: process.env.NODE_ENV === 'production', // 生产环境启用secure属性
    sameSite: 'lax', // 防范CSRF攻击
    maxAge: 60 * 60 * 1000, // 有效期1小时
  };

  res.cookie('authToken', token, cookieOptions);
};

const generateToken = (payload) => {
  return jwt.sign(payload, process.env.TOKEN_SECRET, { expiresIn: '1h' });
};

前端（Next.js 14）请求代码 #

使用fetch调用登录接口，已配置credentials: 'include'允许携带Cookie：

const loginUser = async (email, password) => {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/login`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    credentials: 'include',  // 允许请求携带Cookie
    body: JSON.stringify({ email, password }),
  });

  const data = await response.json();
  return data;
};

环境与CORS配置 #

• 后端运行地址：localhost:5000，前端运行地址：localhost:3000
• CORS配置：

app.use(cors({
  origin: process.env.CLIENT_URL, // Next.js前端地址
  credentials: true,              // 允许跨域Cookie
}));

已排查项 #

• 开发环境下secure属性已设为false
• 前端请求明确携带credentials: 'include'
• 后端res.cookie()已正常调用，JWT令牌生成无错误
• CORS配置已开启credentials: true

请问为何authTokenCookie无法在浏览器中保存？

可能的解决方案 #

1. 确保CORS的origin配置精确匹配 #

检查process.env.CLIENT_URL的值是否为完整且精确的前端地址，比如http://localhost:3000（必须带协议，不能省略http://，也不要带末尾斜杠）。origin不精确匹配时，浏览器会拒绝接收Cookie。

2. 显式指定Cookie的domain属性 #

开发环境下，给Cookie添加domain: 'localhost'配置，因为不同端口的localhost可能被浏览器视为不同域：

const cookieOptions = {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production',
  sameSite: 'lax',
  maxAge: 60 * 60 * 1000,
  domain: process.env.NODE_ENV === 'production' ? 'your-production-domain.com' : 'localhost',
};

3. 排查中间件对响应头的拦截 #

确认在res.cookie()调用后，没有其他中间件（如压缩、日志类中间件）修改或移除了Set-Cookie响应头。检查setTokenCookie调用到res.json之间的代码逻辑。

4. 验证环境变量加载正确性 #

打印process.env.NODE_ENV的值，确认开发环境下该变量为development。如果误设为production，secure会被设为true，而localhost的HTTP请求（非HTTPS）会拒绝保存secure类型的Cookie。

5. 检查浏览器隐私设置 #

确认浏览器未禁用第三方Cookie（localhost环境下虽不属于第三方，但部分隐私设置仍会影响），或开启了"阻止所有Cookie"选项。可尝试在隐私模式下测试，排除缓存或设置干扰。

6. 确认API请求路径正确性 #

检查前端请求的API路径${process.env.NEXT_PUBLIC_API_URL}/api/auth/login是否正确指向后端的/login路由，避免因路径错误导致后端未触发setTokenCookie逻辑。

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