Vercel跨域请求Set Cookie不生效问题求助（Firebase授权场景）

以下是针对问题的具体排查和解决步骤：

• 开启前端请求的凭证携带
  跨域场景下浏览器不会自动携带凭证（含Cookie），必须显式配置：

  • 使用fetch时添加credentials: 'include'参数：

    fetch('http://localhost:4000/api/auth/sign-in', {
      method: 'POST',
      credentials: 'include',
      body: JSON.stringify(你的凭证数据),
      headers: { 'Content-Type': 'application/json' }
    })
    

  • 使用axios时设置withCredentials: true：

    axios.post('http://localhost:4000/api/auth/sign-in', 你的凭证数据, {
      withCredentials: true
    })
    

  直接访问后端接口时浏览器默认携带凭证，所以能成功写入Cookie，但跨域请求必须手动开启该配置。

• 完善vercel.json的CORS配置
  带凭证的跨域请求不允许Access-Control-Allow-Origin设为*，必须指定前端具体域名，同时开启允许凭证：

  {
    "headers": [
      {
        "source": "/api/(.*)",
        "headers": [
          { "key": "Access-Control-Allow-Origin", "value": "http://localhost:3000" },
          { "key": "Access-Control-Allow-Methods", "value": "GET, POST, OPTIONS" },
          { "key": "Access-Control-Allow-Headers", "value": "Content-Type" },
          { "key": "Access-Control-Allow-Credentials", "value": "true" }
        ]
      }
    ]
  }
  

  配置完成后重启Vercel本地服务生效。

• 调整Cookie的属性设置
  检查后端设置Cookie的代码，确保属性符合跨域要求：

  • SameSite：不要设为Strict，本地开发建议用Lax；若部署到HTTPS环境需跨域共享，可设为None（但必须同时添加Secure属性）。
  • Domain：本地开发不要设置该属性，或设为localhost，避免域名不匹配导致Cookie无法写入。
    示例Node.js设置Cookie代码：

  res.cookie('auth_token', 你的授权令牌, {
    httpOnly: true,
    sameSite: 'Lax',
    maxAge: 24 * 60 * 60 * 1000,
    path: '/'
  });
  

• 确认OPTIONS预检请求正常响应
  跨域POST请求会先发送OPTIONS预检请求，确保后端未拦截该请求，且Vercel配置中的Access-Control-Allow-Methods包含OPTIONS，保证预检请求返回200状态码和正确的CORS头部。

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