React向FastAPI传递Bearer Token遇401未授权问题的解决方法

前端代码修复点 #

1. Axios请求参数顺序错误
   你的axios.get调用传参顺序有误，get方法的第二个参数就是配置对象，不需要传空占位符。错误写法会导致请求头未被正确携带：

   // 错误写法
   const response = await axios.get("/api/users/me", {}, config);
   // 正确写法
   const response = await axios.get("/api/users/me", config);
   

2. 空token判断
   组件初始化时token可能为null，此时发送请求会携带无效的Bearer null头，直接触发后端401。需要在请求前先判断token是否存在：

   useEffect(() => {
     const fetchUser = async () => {
       if (!token) return; // 新增：token为空时不发送请求
       const config = {
         headers: {
           "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
       };
       // ... 后续代码
     };
     fetchUser();
   }, [token]);
   

后端代码优化点 #

1. 细化JWT异常处理
   当前try-except捕获所有异常，无法定位具体错误（如token过期、签名无效、payload无id字段等）。建议拆分异常类型，方便调试：

   from jose import JWTError
   
   async def get_current_user(
       token: str = _fastapi.Depends(oauth2_scheme),
       db: _orm.Session = _fastapi.Depends(get_db)
   ):
       try:
           payload = _jwt.decode(token, JWT_SECRET, algorithms=["HS256"])
           user_id = payload.get("id")
           if user_id is None:
               raise _fastapi.HTTPException(status_code=401, detail="Token中无用户ID")
           user = db.query(user_models.User).get(user_id)
           if user is None:
               raise _fastapi.HTTPException(status_code=401, detail="用户不存在")
       except JWTError:
           raise _fastapi.HTTPException(status_code=401, detail="无效或过期的Token")
       except Exception as e:
           raise _fastapi.HTTPException(status_code=401, detail=f"认证失败: {str(e)}")
   
       return user_schemas.User.model_validate(user)
   

2. 验证OAuth2Scheme配置
   确保oauth2_scheme初始化正确，默认从Authorization: Bearer <token>头提取token：

   from fastapi.security import OAuth2PasswordBearer
   
   oauth2_scheme = OAuth2PasswordBearer(tokenUrl="/api/users/login") # 此处tokenUrl需与你的登录接口路径一致
   

3. 确认JWT密钥与算法一致
   检查前后端使用的JWT密钥（JWT_SECRET）和加密算法是否完全一致，任何不一致都会导致解析失败返回401。

调试建议 #

• 在浏览器开发者工具的网络面板，查看/api/users/me请求的请求头，确认Authorization字段是否正确携带Bearer <有效token>。
• 在后端get_current_user函数开头打印token值，确认收到的token和前端发送的一致。

内容的提问来源于stack exchange，提问作者Brayan Muñoz