You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

MERN项目部署到Vercel后Cookie无法携带的问题求助

MERN项目部署到Vercel后Cookie无法携带的问题求助

我特别理解你这种本地跑的好好的,一部署到线上就出问题的挫败感,折腾两三天确实闹心!咱们一步步来排查问题:

首先梳理下你的现状:本地开发时,用户登录后后端成功把JWT存在cookie里,后续带verifyUser中间件的API请求都能正常认证;但部署到Vercel后,cookie完全没被发送,导致认证失败。结合你给出的代码,我觉得大概率是这几个地方出了问题:

1. Cookie配置缺少secure属性(最可能的原因)

你在设置cookie的代码里,只加了sameSite: "none",但sameSite设为none时,浏览器要求必须同时设置secure: true——因为none允许跨站发送cookie,只有在HTTPS环境下才安全,而Vercel部署的服务默认是HTTPS的,本地HTTP环境下不需要这个属性所以没问题,但线上就会因为缺少secure,浏览器直接拒绝保存cookie。

修改你的login controller里的cookie配置:

res
.cookie("access_token", token, {
  httpOnly: true,
  maxAge: 86400000,
  sameSite: "none",
  secure: true, // 加上这一行!
})
.status(200)
.json({ ...others })

2. 检查Vercel环境变量是否正确配置

你代码里用到了process.env.JWT_SECRET_KEYprocess.env.CLIENT_URL,本地是通过.env文件读取的,但Vercel部署时需要手动在项目的「Settings → Environment Variables」里添加这两个变量,确保:

  • CLIENT_URL是你前端部署后的完整地址(比如https://your-frontend-project.vercel.app,不要加末尾的斜杠)
  • JWT_SECRET_KEY和本地的保持一致,避免JWT验证失败

3. 前端请求的credentials设置(容易忽略的点)

虽然你没贴前端代码,但要确认前端在发送API请求时,是否开启了携带凭证的配置:

  • 如果用fetch,要加credentials: 'include'
  • 如果用axios,要设置withCredentials: true
    如果没开这个,浏览器即便是保存了cookie,也不会在跨站请求时携带给后端。

4. Vercel部署配置的小细节

你的vercel.json配置看起来没问题,但可以确认下:

  • 后端的入口文件index.js是否正确,Vercel的@vercel/node构建器是否能正确识别
  • 路由规则"/(.*)"是否覆盖了所有API路径,避免请求被错误转发

另外你提到的截图,虽然我看不到,但从本地和生产的对比来看,生产环境的响应头里应该没有正确返回Set-Cookie或者cookie属性不符合要求,你可以在生产的Network tab里检查响应头的Set-Cookie字段,看是否包含Secure属性。

如果上面的方法都试过还是不行,可以贴一下前端请求的代码或者生产环境的响应头截图,我再帮你排查!

备注:内容来源于stack exchange,提问作者Amar Belkar

火山引擎 最新活动