Node.js后端向React前端获取数据遇阻：401错误及无响应求助

一、Axios 401未授权错误处理 #

• 鉴权凭证问题：先确认请求头里有没有带正确的Token（比如JWT）。前端请求时要把登录后拿到的Token放到Authorization头里，格式一般是Bearer xxx。示例代码：

  axios.get('/api/jobs', {
    headers: {
      'Authorization': `Bearer ${localStorage.getItem('token')}`
    }
  })
  

  后端这边要检查鉴权中间件（比如express-jwt）的配置，确保能正确验证Token的签名、有效期，排除Token过期或者格式写错的情况。
• CORS配置遗漏：后端如果用Express，CORS要允许携带自定义头和凭证。配置示例：

  const cors = require('cors');
  app.use(cors({
    origin: 'http://你的前端域名',
    credentials: true,
    allowedHeaders: ['Authorization', 'Content-Type']
  }));
  

• 路由权限误配：看看后端/api/jobs路由是不是被错误加上了鉴权中间件，如果这个接口不需要登录就能访问，就把中间件去掉；如果需要登录，就得确保用户已经正确登录拿到有效Token。

二、Fetch无控制台输出问题处理 #

• 没处理异常：Fetch默认不会把4xx/5xx状态码当成错误抛出，得手动检查响应状态，不然错误会被吞掉。正确写法：

  fetch('/api/jobs', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${localStorage.getItem('token')}`
    }
  })
  .then(res => {
    if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`);
    return res.json();
  })
  .then(data => console.log('拿到数据：', data))
  .catch(err => console.error('请求出错：', err));
  

• 检查请求是否发送：打开浏览器的「网络」标签，看看这个请求有没有发出去，是不是被CORS拦截了，或者有其他网络错误。
• 确认代码是否执行：检查Fetch的代码是不是在正确的时机调用（比如组件的useEffect里），有没有被条件判断给跳过了。

三、通用排查步骤 #

• 先用Postman测试后端接口：带正确Token能不能拿到数据，不带Token是不是返回401，先确认后端接口本身没问题。
• 看浏览器「应用」标签里的localStorage或cookies，有没有存有效的登录Token。
• 查后端日志，看看请求有没有到后端，以及返回401的具体原因（比如Token验证失败、用户没权限等）。

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