发送 axios 获取带有 Auth 标头的请求时出现 401 错误

Question

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

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

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

我构建了一个简单的 boolean function 如果当前用户拥有有效的 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);

Answer 1

根据您的服务器配置，您需要通过X-Auth-Token header 而不是Authorization ，

它应该是：

headers: {
  "X-Auth-Token": token
}

另外，考虑到标题是区分大小写的！