React中Axios请求返回401未授权错误，Token正确仍报错求助

最直接的问题：Axios参数传错了 #

你的代码里axios.get的参数格式不符合Axios规范，GET请求的正确语法是axios.get(url[, config])，你在URL后额外加了一个空对象{}，导致包含headers的配置对象被当成了无效的第三个参数，服务器根本没收到你传的Token。修正后的代码如下：

const getFile = (filename) => {  //filename = "wy8NNSV9uAvL0NPYydw5iaZDkz5XQYeFo2A7VZo0.pdf"
axios.get(
    "http://localhost:8000/api/files/" + filename,
    {
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
      responseType: "blob",
    }
  )
  .then((res) => {
    const file = new Blob([res.data], { type: "application/pdf" });
    const fileURL = URL.createObjectURL(file);
    window.open(fileURL);
  })
  .catch((err) => {
    console.log(err);
  });};

其他排查方向 #

• 验证Token实际值：在控制台打印localStorage.getItem("token")，复制该值用Postman直接调用接口测试，确认Token本身是否能通过后端验证。
• 检查Token格式：确保Bearer 后面有空格，且Token没有多余的空格、换行或特殊字符。
• 后端规则排查：如果Postman测试正常，可能后端对文件请求的验证逻辑和其他接口不同，比如需要额外权限或路由配置错误。
• 跨域配置检查：若前后端域名不同，确认后端CORS配置允许携带Authorization自定义请求头，部分后端默认会拦截这类跨域头。

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