React+Node.js登录后调用需认证API返回401 Unauthorized问题求助

以下是几种最可能导致你遇到的401问题的原因及排查方法：

1. 前端请求未携带认证凭证 #

如果后端用JWT认证，确认请求头里是否正确添加了Authorization: Bearer <token>；如果是基于cookie的认证，跨域请求时必须显式允许携带凭证：

• Axios示例：

  // 全局配置（推荐）
  axios.defaults.withCredentials = true;
  
  // 单个请求配置
  axios.post('/api/projects', projectData, {
    withCredentials: true,
    headers: {
      // 如果用JWT，加上这行
      Authorization: `Bearer ${localStorage.getItem('authToken')}`
    }
  });
  

• Fetch示例：

  fetch('/api/projects', {
    method: 'POST',
    credentials: 'include', // 必须加这个才会携带跨域cookie
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${localStorage.getItem('authToken')}`
    },
    body: JSON.stringify(projectData)
  });
  

2. 后端CORS配置错误 #

后端必须允许前端域名携带凭证，且不能用通配符*作为origin：

• Node.js + Express + cors中间件示例：

  const cors = require('cors');
  // 替换成你的前端实际域名
  const FRONTEND_URL = 'http://localhost:3000';
  
  app.use(cors({
    origin: FRONTEND_URL,
    credentials: true // 必须开启这个，允许携带cookie/凭证
  }));
  

如果用了通配符origin: '*'，浏览器会拒绝携带凭证，直接导致后端拿不到认证信息返回401。

3. Token存储或传递错误 #

• 登录成功后，确认是否正确保存了后端返回的token：

  // 登录接口请求成功后
  localStorage.setItem('authToken', response.data.token);
  

• 调用需认证接口时，检查是否正确从存储中取出token并添加到请求头，注意不要遗漏Bearer 前缀（如果后端要求的话）。

4. 后端认证中间件逻辑问题 #

检查后端验证认证信息的代码，比如JWT验证中间件：

const jwt = require('jsonwebtoken');

function authenticateToken(req, res, next) {
  const authHeader = req.headers['authorization'];
  // 注意这里要处理Bearer前缀
  const token = authHeader && authHeader.split(' ')[1];

  if (!token) {
    return res.sendStatus(401);
  }

  jwt.verify(token, process.env.JWT_SECRET, (err, user) => {
    if (err) return res.sendStatus(403);
    req.user = user;
    next();
  });
}

确认中间件是否正确挂载到了需认证的API路由上，且没有逻辑错误（比如secret不匹配、token过期判断错误）。

5. Cookie的SameSite属性问题 #

如果后端用cookie存储会话信息，设置cookie时要注意SameSite属性：

res.cookie('authToken', token, {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production', // 生产环境必须设为true（HTTPS）
  sameSite: 'Lax', // 跨域场景可设为'None'，但必须配合secure: true
  maxAge: 24 * 60 * 60 * 1000
});

如果SameSite设为Strict，跨域请求时浏览器不会发送该cookie，直接导致401。

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