401发送带有验证头的axios get请求时出错

Question

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

当我将认证中间件添加为参数时，我的axios get请求返回401错误。这个中间件要求用户在返回任何数据之前拥有一个有效的JWT令牌。

当使用Insomnia/Postman发出请求时，只要将用户令牌添加到请求头中，我总是会得到所需的数据返回。然而，当我试图在react应用程序中获取数据时，我得到了"加载资源失败:服务器响应的状态为401(未经授权)"。错误日志，以及我自定义的json错误响应，"No Auth token, authorization denied!">

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

后端(带express):

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标头而不是Authorization，

应该是:

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

还要注意头文件是区分大小写的!