前端认证系统Token验证失败（AxiosError）排查求助

1. 确认请求是否携带Token #

你的AuthService未配置自动在请求头携带Token的逻辑，这是最可能的问题根源。修改AuthService，添加请求拦截器自动带上Token：

class AuthService {
  constructor() {
    this.api = axios.create({ baseURL: 'http://localhost:5005' }); // 确保baseURL指向后端地址
    // 添加请求拦截器，自动携带Token
    this.api.interceptors.request.use((config) => {
      const token = localStorage.getItem('authToken');
      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
      return config;
    });
  }

  verify = () => {
    return this.api.get("/users/verify");
  };
}

2. 捕获完整的AxiosError信息 #

修改auth.context.js中的错误捕获逻辑，打印完整错误详情以明确错误类型：

const authenticateUser = () => {
  const storedToken = localStorage.getItem("authToken");
  if (storedToken) {
    authService
      .verify()
      .then((response) => {
        // 现有逻辑
      })
      .catch((error) => {
        // 打印详细错误信息
        console.error("验证错误状态码:", error.response?.status);
        console.error("验证错误响应:", error.response?.data);
        console.error("错误消息:", error.message);
        console.error("请求配置:", error.config);
        // 打印完整错误对象
        console.dir(error, { depth: null });
      });
  }
};

通过这些信息可快速判断是401（Token无效）、404（URL错误）、CORS错误还是其他问题。

3. 检查Token的一致性与有效性 #

• 在后端中间件中打印收到的Token，和前端localStorage中的值对比：

  function getTokenFromHeaders(req) {
    if (req.headers.authorization && req.headers.authorization.split(" ")[0] === "Bearer") {
      const token = req.headers.authorization.split(" ")[1];
      console.log("后端收到的Token:", token); // 复制此值和前端localStorage的authToken对比
      return token;
    }
    console.log("请求未携带Token");
    return null;
  }
  

• 确认生成Token时使用的TOKEN_SECRET和算法（HS256）与中间件配置完全一致，不一致会导致验证失败返回401。

4. 优化CORS配置 #

替换手动设置header的方式，使用cors包自动处理预请求：

1. 安装依赖：

npm install cors

2. 修改app.js中的CORS配置：

const cors = require('cors');

// 替换原手动CORS设置
app.use(cors({
  origin: 'http://localhost:5173',
  allowedHeaders: ['Content-Type', 'Authorization'],
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH']
}));

5. 排查全局中间件挂载问题 #

你在app.js中全局挂载了isAuthenticated，虽credentialsRequired: false不会直接报错，但可能和路由上的中间件冲突。可先注释全局挂载，仅在需要的路由上使用：

// app.use(isAuthenticated); // 注释此行，仅在verify路由单独使用

6. 确认端点URL正确性 #

检查AuthService中axios实例的baseURL是否正确指向后端（http://localhost:5005），若未设置baseURL，请求会发送到前端域名，导致404错误。

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