Vercel部署后Cookies无法发送，本地环境运行正常求助

针对你遇到的本地跨端口运行正常、Vercel部署后端后请求不带Cookie的问题，可按以下步骤排查修复：

1. 强制设置Cookie的SameSite与Secure属性 #

跨域场景下，浏览器要求Cookie必须同时满足SameSite=None和Secure属性才会携带发送。在Express设置Cookie时添加这两个属性，同时区分开发/生产环境，避免本地HTTP环境下Secure导致Cookie失效：

// Express中设置Cookie的代码示例
res.cookie('your-cookie-key', cookieValue, {
  httpOnly: true,
  maxAge: 24 * 60 * 60 * 1000,
  // 生产环境（Vercel）启用跨域所需属性，本地开发保持默认兼容
  sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
  secure: process.env.NODE_ENV === 'production'
});

2. 优化vercel.json的CORS配置 #

当前配置的Access-Control-Allow-Origin固定为http://localhost:3000是正确的，但需添加缓存控制头避免Vercel边缘缓存干扰，同时确保OPTIONS请求被正确处理：

{
  "version": 2,
  "builds": [
    {
      "src": "*.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/",
      "methods": ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
      "headers": {
        "Access-Control-Allow-Credentials": "true",
        "Access-Control-Allow-Origin": "http://localhost:3000",
        "Access-Control-Allow-Methods": "GET,OPTIONS,PATCH,DELETE,POST,PUT",
        "Access-Control-Allow-Headers": "*",
        "Cache-Control": "no-cache"
      }
    }
  ]
}

注意：如果Express中已经通过cors()中间件配置了完整的CORS规则，可移除vercel.json中的CORS相关配置，避免重复设置引发冲突。

3. 确认前端Axios配置的正确性 #

• 确保全局Axios实例开启凭证携带，且请求地址为Vercel的HTTPS域名（Secure Cookie仅在HTTPS环境下生效）：

  import axios from 'axios';
  const api = axios.create({
    baseURL: 'https://your-project-name.vercel.app', // 替换为你的Vercel域名
    withCredentials: true
  });
  

• 检查单个请求是否覆盖了withCredentials配置，确保所有请求都继承全局设置。

4. 验证Cookie的Set-Cookie响应头 #

在浏览器开发者工具的Network面板中，查看后端返回的Set-Cookie头：

• 确认包含SameSite=None和Secure属性
• 确认未手动设置错误的Domain（建议不指定Domain，让浏览器自动适配当前Vercel域名）

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