部署后Next.js服务器无法接收Cookie问题求助

问题根源分析 #

1. Server Action导致Cookie流程错误：你的登录函数使用"use server"标记为Next.js Server Action，执行逻辑在Vercel服务器端而非用户浏览器。此时fetch请求由Vercel服务器发往Glitch API，获取到的Cookie存储在Vercel服务器；后续用cookies().set设置的是前端域名（mysite.me）下的Cookie，与Glitch API域名不匹配，浏览器后续请求Glitch时不会携带该Cookie。
2. 后端Cookie配置缺失secure属性：当SameSite: None时，浏览器要求Cookie必须携带secure: true（仅HTTPS环境下传输），否则不会保存Cookie。
3. 可能缺失cookie-parser中间件：Express默认不解析Cookie，若未配置该中间件，req.cookies会为空。
4. CORS origin配置不够严谨：origin: true自动反射请求源，但跨域带Cookie时，明确指定允许的origin更可靠，避免潜在策略冲突。

解决方案 #

1. 将登录逻辑改为客户端执行（移除Server Action） #

把登录逻辑移到客户端组件中，让浏览器直接与Glitch API交互，Cookie会直接保存到Glitch域名下，后续请求自动携带：

'use client';

import { useRouter } from 'next/navigation';

export default function BlogLogin() {
  const router = useRouter();

  async function loginUser(formData) {
    try {
      const response = await fetch(
        `https://[glitch_url].glitch.com/api/users/login`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          credentials: "include", // 浏览器端请求时自动处理Cookie
          body: JSON.stringify(Object.fromEntries(formData)),
        }
      );

      if (response.ok) {
        router.push("/blog/admin");
      } else {
        console.log("登录失败");
      }
    } catch (err) {
      console.log(err);
    }
  }

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      loginUser(new FormData(e.target));
    }}>
      <input type="text" name="username" placeholder="用户名" />
      <input type="password" name="password" placeholder="密码" />
      <button type="submit">登录</button>
    </form>
  );
}

2. 完善后端Cookie配置 #

设置Cookie时添加secure: true，符合SameSite: None的要求：

// 后端登录接口的Cookie设置部分
res.cookie("access_token", token, {
  httpOnly: true,
  sameSite: "None",
  secure: true, // 必须添加，HTTPS环境下生效
  path: "/"
}).sendStatus(200);

3. 配置Express的cookie-parser中间件 #

安装并使用该中间件，确保Express能解析Cookie：

npm install cookie-parser

在Express入口文件中添加：

const cookieParser = require('cookie-parser');
app.use(cookieParser());

4. 优化CORS配置 #

精确指定允许的前端origin，替换origin: true：

const corsOptions = {
  origin: "https://www.[mysite].me", // 替换为你的前端实际域名
  credentials: true,
};

app.use(cors(corsOptions));

5. 确保后续请求携带credentials #

所有前端请求Glitch API时，都要设置credentials: "include"，保证浏览器发送Cookie：

// 示例：获取用户信息的请求
async function fetchUserInfo() {
  const response = await fetch(`https://[glitch_url].glitch.com/api/users/me`, {
    credentials: "include",
  });
  return await response.json();
}

额外注意事项 #

• 前后端必须使用HTTPS：Vercel和Glitch默认提供HTTPS，本地开发时若用HTTP，可设置secure: process.env.NODE_ENV === 'production'避免Cookie无法保存。
• 利用浏览器Network面板排查：查看登录请求的Set-Cookie响应头是否正确，后续请求的Cookie请求头是否存在，快速定位问题。

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