Next.js生产环境中Cookie无法设置的问题求助

问题核心原因 #

你遇到的问题本质是前端JS无法设置httpOnly属性的Cookie：

• 你使用的js-cookie是运行在浏览器环境的前端库，而httpOnly是浏览器的安全限制——标记为httpOnly的Cookie只能由服务器通过响应头的Set-Cookie字段设置，前端JS完全无法创建或修改这类Cookie。
• 本地开发时process.env.NODE_ENV !== 'development'为false，httpOnly属性关闭，所以前端能正常设置Cookie；生产环境开启httpOnly后，前端调用Cookies.set的操作直接失效，浏览器自然不会存储这个Cookie。

解决方案 #

1. 由后端接口设置Cookie（推荐，符合安全规范）

认证令牌这类敏感数据必须用httpOnly Cookie存储，所以需要在登录成功的API响应中由服务器设置Cookie：

• 如果用Next.js的API路由，示例代码如下：

// pages/api/login.js
export default async function handler(req, res) {
  // 假设这里完成登录验证，生成token
  const authToken = '生成的认证令牌';
  
  // 设置Cookie响应头
  res.setHeader('Set-Cookie', [
    `auth_token=${authToken}; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=${60 * 24 * 3600}`
    // Max-Age单位是秒，这里设置为60天，替换你原来的expires配置
  ]);
  
  res.status(200).json({ message: '登录成功' });
}

• 如果是第三方后端API，需要在后端服务中配置Set-Cookie响应头，确保包含HttpOnly、Secure（生产环境）、SameSite=Lax等属性。

2. 临时方案：关闭httpOnly（不推荐，有安全风险）

如果只是临时测试，可以把httpOnly强制设为false，但这样你的认证令牌会暴露给前端JS，存在XSS攻击窃取令牌的风险：

async function saveCookie(token) {
    Cookies.set('auth_token', token, {
        httpOnly: false, // 强制关闭httpOnly
        expires: 60,
        secure: process.env.NODE_ENV !== 'development',
        sameSite: 'lax',
        path: '/',
    });
}

额外注意事项 #

• Netlify部署的是静态前端资源，本身没有服务器环境，无法直接设置httpOnly Cookie，必须依赖后端接口完成。
• 如果前端和后端是跨域部署，需要在前端请求时添加credentials: 'include'（Axios或Fetch），同时后端配置Access-Control-Allow-Credentials: true和正确的Access-Control-Allow-Origin。

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