使用 Auth Headers 发送 axios get 请求时出现 401 错误

Posted 2023-02-22

【中文标题】使用 Auth Headers 发送 axios get 请求时出现 401 错误

【英文标题】：401 Error when sending axios get request with Auth Headers

【发布时间】：2021-05-01 18:03:45

【问题描述】：

在我的 react 项目中，我一直在使用 axios 来帮助从 MongoDB 获取数据。

当我将身份验证中间件添加为参数时，我的 axios 获取请求返回 401 错误。此中间件要求用户在返回任何数据之前拥有有效的 JWT 令牌。

当使用 Insomnia/Postman 发出请求时，只要将用户令牌添加到请求标头中，我总是会返回所需的数据。但是，当我尝试在反应应用程序中获取数据时，我收到“加载资源失败：服务器响应状态为 401（未授权）”错误日志，以及我的自定义 json 错误响应，“无身份验证令牌，授权被拒绝！”

我构建了一个简单的布尔函数，如果当前用户拥有有效的 JWT 令牌，则返回 true。尽管返回 true，但我仍然收到 401 错误作为响应，这让我怀疑我的反应代码中某处存在语法或格式错误。

后端（带快递）：

router.get("/allauth", auth, async (req, res) => 
 const players = await Player.find();
  res.json(players);
); 

授权：

const jwt = require("jsonwebtoken");

const auth = (req, res, next) => 
 try  
    const token = req.header("x-auth-token"); 
    
    if (!token)
        return res.status(401)
        .json( msg: "No Auth token, authorisation denied!" );

    //match token against .env password
    const verified = jwt.verify(token, process.env.JWT_SECRET);

    if (!verified)
        return res.status(401)
        .json( msg: "Token verification failed, authorisation denied!" );

    req.user = verified.id;
    next(); 

     catch (err) 
        res.status(500).json( error: err.message );
 
;

反应前端：

export default function DisplayTeam() 

const [players, setPlayers] = useState([]);
const userData = useContext(UserContext);

 useEffect(() => 
    let token = localStorage.getItem("auth-token");
    const url = "http://localhost:5000/players";
    console.log(token);

    axios.get(`$url/allauth`, 
        headers: 
            "Authorization": `x-auth-token $token`
        
    )
        .then( response => setPlayers(response.data))
        .catch( error => console.log(error));
 , []);

return (//display from DB);

【参考方案1】：

根据您的服务器配置，您需要传递 X-Auth-Token 标头而不是 Authorization，

应该是：

headers: 
  "X-Auth-Token": token

另外，请注意标题区分大小写！

【讨论】：

谢谢！这行得通。我以前尝试过这种语法，但是它都是小写的，这可以解释我的困难 lol

这是正确的，但我建议向后更改：发送headers: "Authorization": token ，然后在服务器上查找Authorization header，而不是使用自定义标头进行身份验证。

@xdumaine，你说得对，我完全同意！