React useEffect中使用axios请求数据报401未授权错误如何解决？

问题排查与解决方案 #

1. 401报错核心原因排查 #

401未授权错误说明后端接口配置了身份校验规则，前端请求未携带符合要求的身份凭证：

• 先检查server.js中，app.use("/items", itemRoutes)之前是否注册了全局身份校验中间件（比如JWT校验、session校验中间件），如果有就说明所有/items开头的请求都需要携带身份凭证。
• 前端根据你的身份认证方案补全请求配置：
  • 如果用JWT token认证，需要在请求头携带Authorization字段：

    const { data } = await axios.get(`/items/${match.params.id}`, {
      headers: {
        Authorization: `Bearer ${localStorage.getItem('你的token存储key')}`
      }
    })
    

    也可以配置axios全局拦截器统一添加请求头，避免每个接口重复写配置。
  • 如果用Cookie做身份认证，需要开启withCredentials配置携带Cookie：

    const { data } = await axios.get(`/items/${match.params.id}`, {
      withCredentials: true
    })
    

2. 其它代码问题修复 #

• 你当前贴的后端itemRoutes.js存在重复响应的bug：当找到对应item时已经执行过res.json(wantedItem)，末尾又多了一行res.json(wantedItem)，会触发「无法在响应已发送后设置请求头」的报错，直接删掉末尾的冗余res.json(wantedItem)即可。
• useEffect里打印title、description为undefined是正常现象：fetching是异步函数，调用后不会阻塞后续代码执行，打印时请求还没返回、state还没更新，等请求成功执行setState后组件重新渲染，就能拿到对应的值。

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