使用Redux发起Axios GET请求返回user:null问题排查

你遇到的这个问题其实挺典型的——POST请求和Postman的GET都正常，唯独Axios的GET请求拿不到用户信息，核心原因是跨域场景下Axios默认不会自动携带Cookie，而Postman会自动处理Cookie，导致了两者的差异。

问题拆解 #

你的后端认证逻辑依赖x_auth Cookie里的token，但Axios发起跨域GET请求时，默认不会把前端的Cookie发送给后端，所以中间件里req.cookies.x_auth拿不到值，自然查不到用户，返回user:null。而Postman在登录后会自动保存Cookie，后续请求都会带上，所以能正常通过认证。

解决方案步骤 #

1. 让Axios请求携带Credentials

你需要给Axios开启携带Cookie的配置，有两种方式：

• 全局配置（推荐）：在项目里Axios初始化的地方（比如单独的axios配置文件）添加一行：

import axios from 'axios';
axios.defaults.withCredentials = true;

这样所有Axios请求都会自动携带Cookie。

• 单个请求配置：直接修改user.actions里的auth函数：

export function auth() {
  const request = axios.get(`http://localhost:3001${USER_SERVER}/auth`, {
    withCredentials: true // 新增这个配置项
  })
    .then(response => response.data)
  return {
    type: AUTH_USER,
    payload: request
  }
}

2. 后端CORS必须允许Credentials

前端要跨域带Cookie，后端的CORS设置必须满足两个要求：

• 开启Access-Control-Allow-Credentials为true
• Access-Control-Allow-Origin不能用通配符*，必须指定前端的具体域名（比如你的前端运行在http://localhost:3000）

假设你用cors中间件，配置示例如下：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:3000', // 替换成你的前端实际地址
  credentials: true
}));

3. 验证登录接口的Cookie设置

确保登录成功后，后端正确设置了x_auth Cookie，并且Cookie的参数允许跨域携带。比如登录接口的响应代码里：

res.cookie('x_auth', token, {
  httpOnly: true,
  domain: 'localhost', // 根据你的实际域名调整
  path: '/'
});

额外检查点 #

• 可以在后端认证中间件里打印token的值，确认Axios请求是否携带了Cookie：

let auth = (req, res, next) => {
  let token = req.cookies.x_auth
  console.log('拿到的token:', token); // 如果打印undefined，说明Axios没带Cookie
  // ... 后续逻辑
}

• 确认User.findByToken方法能正确通过有效token查询到用户，避免是token解析逻辑出问题。

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