将后端部署至Vercel后无法获取Cookie的问题求助

核心问题排查与解决步骤 #

1. 前端请求必须开启凭证携带 #

不管用fetch还是axios，发起登录及后续接口请求时，必须明确开启凭证携带配置，否则浏览器会限制Cookie的读取和传递：

• Axios示例：

axios.post('/api/login', { email, password }, {
  withCredentials: true
})

• Fetch示例：

fetch('/api/login', {
  method: 'POST',
  credentials: 'include',
  body: JSON.stringify({ email, password }),
  headers: {
    'Content-Type': 'application/json'
  }
})

2. 后端正确配置CORS #

你的Express后端必须明确允许前端域名跨域携带凭证，安装cors包后按以下方式配置：

const cors = require('cors');

// 替换为你的前端Vercel域名
const corsOptions = {
  origin: 'https://your-frontend.vercel.app',
  credentials: true, // 必须开启，允许跨域携带凭证
  optionsSuccessStatus: 200
};

app.use(cors(corsOptions));

注意：origin不能设为*，否则credentials: true会直接失效，必须指定具体的前端域名；多环境场景可通过环境变量动态配置。

3. 调整Cookie的Domain属性 #

如果前后端域名不同（如前端xxx.vercel.app、后端yyy.vercel.app），需给Cookie指定统一根域名，确保跨子域名可访问：

res.cookie("jwttoken", token, {
  httpOnly: false,
  sameSite: "none",
  secure: true,
  domain: ".vercel.app" // 适配所有Vercel子域名
});

4. 验证Vercel部署配置 #

后端部署到Vercel时，可通过vercel.json补充配置响应头，确保Cookie相关权限正确：

{
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "https://your-frontend.vercel.app" }
      ]
    }
  ]
}

验证方法 #

1. 登录成功后，在浏览器控制台执行document.cookie，查看是否能输出jwttoken的值；
2. 检查后续接口请求的Request Headers，确认是否包含Cookie: jwttoken=xxx；
3. 查看Response Headers，确认Access-Control-Allow-Credentials为true、Access-Control-Allow-Origin为前端域名。

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