在我的 react 项目中,我一直在使用 axios 来帮助从 MongoDB 获取数据。
当我添加身份验证中间件作为参数时,我的 axios get 请求返回 401 错误。此中间件要求用户在返回任何数据之前拥有有效的 JWT 令牌。
使用 Insomnia/Postman 进行请求时,只要将用户令牌添加到请求标头中,我总是会得到所需的数据。但是,当我尝试在 React 应用程序中获取数据时,我收到“无法加载资源:服务器响应状态为 401(未授权)”错误日志,以及我的自定义 json 错误响应,“无身份验证令牌,授权被拒绝!”
我构建了一个简单的布尔函数,如果当前用户拥有有效的 JWT 令牌,则该函数返回 true。尽管返回 true,我仍然收到 401 错误作为响应,这让我怀疑我的 React 代码中存在语法或格式错误。
后端(带快递):
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);
答案 0 :(得分:2)
根据您的服务器配置,您需要传递 X-Auth-Token
标头而不是 Authorization
,
应该是:
headers: {
"X-Auth-Token": token
}
另外,请注意标头区分大小写!