React中Axios GET请求未携带Cookie（已设withCredentials: true）

以下是排查和解决的关键点：

• 后端跨域配置必须匹配
  跨域场景下，后端必须明确允许携带凭证，且不能使用通配符*作为允许的Origin：
  以Express为例，需要添加这些配置：

  app.use((req, res, next) => {
    // 替换为你的前端实际域名/IP，比如http://localhost:5173
    res.header('Access-Control-Allow-Origin', 'http://your-frontend-url');
    res.header('Access-Control-Allow-Credentials', 'true');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
  });
  

  注意：Access-Control-Allow-Origin必须是具体的前端地址，不能用*，否则浏览器会拒绝携带Cookie。

• 检查Cookie的属性设置
  后端设置Cookie时，需确保这些属性符合跨域要求：

  • SameSite: 跨域场景下需设为None（同时要配合Secure属性，生产环境HTTPS下生效；本地HTTP环境可暂时去掉Secure测试）
  • Domain: 需与后端请求的域名/IP一致，比如后端是192.168.0.125，Cookie的Domain要设为192.168.0.125
  • Path: 确保Cookie的路径覆盖请求的接口路径，比如/api/v1

• 尝试全局配置Axios的withCredentials
  局部配置可能因某些原因未生效，试试全局开启：

  import axios from 'axios';
  // 在项目入口文件（如App.js或main.jsx）添加
  axios.defaults.withCredentials = true;
  

  之后再发起GET请求，无需重复设置局部参数。

• 验证请求URL与Cookie的匹配性
  确认请求的URL（http://192.168.0.125:3000/api/v1/profile）和Cookie的Domain、Path完全匹配，否则浏览器不会自动携带Cookie。

• 检查浏览器隐私设置
  浏览器的隐私模式或严格隐私设置会阻止第三方Cookie，切换到正常模式测试，或在浏览器设置中允许第三方Cookie。

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