Node.js后端设置Cookie后React前端axios请求无法携带Cookie如何解决

• CORS配置错误
  这是最常见的原因，后端需要同时满足两个要求：

  1. Access-Control-Allow-Origin 不能使用通配符 *，必须明确填写前端的完整域名（包含端口），例如前端运行在 http://localhost:3000 就填该值
  2. 必须开启 Access-Control-Allow-Credentials: true
     以express的cors中间件为例，正确配置如下：

  const cors = require('cors');
  app.use(cors({
    origin: 'http://你的前端完整域名:端口',
    credentials: true
  }));
  

  手动配置响应头的写法：

  res.setHeader('Access-Control-Allow-Origin', 'http://你的前端完整域名:端口');
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  

• Cookie属性配置不匹配

  1. Domain 属性需要和前后端域名匹配：如果后端是 api.xxx.com、前端是 www.xxx.com，需要将Domain设为根域名 .xxx.com，保证跨二级域名可以读取
  2. Path 属性默认是当前接口的路径，建议显式设置为 /，保证全站可访问
     调整后的cookie设置代码：

  res.cookie('cook', token, { 
    httpOnly: true,
    domain: '.你的根域名.com',
    path: '/'
  });
  

• SameSite属性被Chrome拦截
  新版Chrome默认Cookie的SameSite属性为Lax，跨站场景下会拦截未显式配置的Cookie：

  1. 跨站请求场景：需要设置sameSite: 'None'，同时必须开启secure: true（要求站点走HTTPS协议）
  2. 本地开发HTTP场景：可以显式设置sameSite: 'Lax'，secure: false避免拦截
     跨站场景配置示例：

  res.cookie('cook', token, { 
    httpOnly: true,
    sameSite: 'None',
    secure: true
  });
  

• 前端代理配置遗漏
  如果本地开发用了webpack/vite的反向代理，需要在代理配置中开启changeOrigin，必要时添加cookieDomainRewrite重写Cookie域名，以vite配置为例：

  export default defineConfig({
    server: {
      proxy: {
        '/api': {
          target: 'http://你的后端地址:端口',
          changeOrigin: true,
          cookieDomainRewrite: 'localhost'
        }
      }
    }
  })
  

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