Next.js：带Cookie凭证的路由请求因CORS失败，刷新令牌无Cookie报错

客户端Next.js钩子代码 #

useEffect(() => {
  const firstLogin = localStorage.getItem("firstLogin");
  if (firstLogin) {
    const refreshToken = async () => {
      const res = await fetch("http://localhost:8000/user/refresh-token", {
        method: "GET",
        credentials: "include",
        headers: { "Content-Type": "application/json" },
      });
      const tk = await res.json();
      console.log(tk);
    };
    refreshToken();
  }
}, []);

服务器CORS中间件代码 #

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, PATCH, DELETE, OPTIONS"
  );
  res.setHeader(
    "Access-Control-Allow-Headers",
    "Content-Type, Authorization, origins"
  );
  res.setHeader("Access-Control-Allow-Credentials", true);
  if (req.method === "OPTIONS") {
    return res.status(200);
  }

  next();
});

问题排查与解决方案 #

1. 修正Cookie的SameSite与Secure属性

登录接口设置Cookie时，必须配置正确的SameSite属性，否则浏览器在重定向或跨域请求时不会自动携带Cookie：

• 本地HTTP环境：设置SameSite=Lax（SameSite=None要求搭配Secure属性，HTTP环境无法生效）
• 生产HTTPS环境：设置SameSite=None; Secure

示例（Express设置Cookie代码）：

res.cookie('refreshToken', tokenValue, {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production',
  sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax',
  maxAge: 7 * 24 * 60 * 60 * 1000,
  path: '/' // 确保Cookie对所有路由可见
});

2. 完善OPTIONS请求处理

当前服务器仅返回status(200)但未结束响应，可能导致浏览器判定CORS不通过，需修改为：

if (req.method === "OPTIONS") {
  return res.status(200).send(); // 明确结束OPTIONS请求
}

3. 验证Cookie的路径与域名

确保设置Cookie时path为/，让所有子路由（包括/user/refresh-token）都能访问；域名设置为localhost（本地开发），避免域名不匹配导致Cookie无法携带。

4. 确认firstLogin的有效性

在useEffect中添加日志，确认localStorage的firstLogin值是否正确获取：

useEffect(() => {
  const firstLogin = localStorage.getItem("firstLogin");
  console.log('firstLogin状态:', firstLogin); // 验证值是否存在
  if (firstLogin) {
    // 原有请求代码
  }
}, []);

5. 检查浏览器Cookie存储

打开浏览器开发者工具（Application > Cookies > http://localhost:8000），确认登录后存在目标Cookie，且Path为/、Domain为localhost，无额外限制。

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