Express(Render)与Next.js(Vercel)跨域Cookie刷新丢失问题求助

核心原因分析 #

1. Cookie Domain配置错误：你尝试将domain设为前端Vercel域名，浏览器会拒绝绑定不属于后端（devtinder-1-7pym.onrender.com）的域名，导致Cookie无法持久化。
2. 前端请求未携带凭证：如果前端向后端发起请求时未指定携带凭证，浏览器不会持久化存储Cookie。
3. 跨域规则严格性：Render与Vercel均为平台级域名，浏览器对这类跨域场景的Cookie规则校验更严格，Secure、SameSite等参数组合必须完全符合要求。

针对疑问的解答 #

1. 为何Cookie在刷新后消失？ #

错误的domain设置导致浏览器判定该Cookie不属于当前前端域名，刷新时自动清理；另外如果前端请求未携带凭证，浏览器不会将Cookie持久化存储。

2. Render与Vercel之间的跨域Cookie是否存在持久化问题？ #

平台本身不存在持久化限制，但必须严格遵循浏览器跨域Cookie规则：

• 不能设置不属于后端的Domain
• 必须保持Secure: true + SameSite: None的组合
• 前端请求必须携带凭证

3. 是否需要修改Cookie设置或中间件的Cookie获取方式？ #

需要同时调整Cookie配置、前端请求逻辑和Next.js中间件，具体修改如下：

具体修改步骤 #

1. 后端Cookie配置修正 #

移除错误的domain设置，浏览器会自动根据请求源处理Cookie存储：

res.cookie("token", token, {
  expires: new Date(Date.now() + 24 * 60 * 60 * 1000), // 24小时有效期
  secure: true,
  sameSite: "None",
  httpOnly: true,
  path: "/" // 确保Cookie在全站生效
});

2. 前端请求添加凭证 #

所有向后端发起的请求（尤其是登录、认证接口）必须携带凭证：

• Fetch示例：

fetch('https://devtinder-1-7pym.onrender.com/api/auth/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  credentials: 'include', // 关键配置
  body: JSON.stringify({ emailId, password })
})

• Axios示例：

axios.post('https://devtinder-1-7pym.onrender.com/api/auth/login', { emailId, password }, {
  withCredentials: true // 关键配置
})

3. Next.js中间件优化 #

调整Cookie获取逻辑，增加错误兜底：

import { NextResponse } from 'next/server'

const protectedRoutes = ['/', '/profile', '/connections', '/request'];

export const middleware = (req) => {
  try {
    const path = req.nextUrl.pathname;
    // 服务器端获取httpOnly Cookie
    const token = req.cookies.get('token')?.value;

    if (protectedRoutes.includes(path) && !token) {
      return NextResponse.redirect(new URL('/login', req.nextUrl));
    }

    return NextResponse.next();
  } catch (error) {
    console.log("ERROR ", error);
    return NextResponse.redirect(new URL('/login', req.nextUrl));
  }
}

export const config = {
  matcher: ['/', '/profile', '/connections', '/request']
}

4. 额外检查项 #

• 确认后端CORS配置中的origin数组已包含前端Vercel域名（当前配置正确，无需修改）
• 关闭浏览器“阻止第三方Cookie”的设置，避免浏览器拦截跨域Cookie

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