Javascript 401发送带有Auth头的axios get请求时出错

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

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

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

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

后端（带express）：

认证：

反应前端：

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);

---

根据您的服务器配置，您需要传递

X-Auth-Token

头而不是

授权

应该是：

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

---

另外，要考虑到头是区分大小写的

根据您的服务器配置，您需要传递

X-Auth-Token

头而不是

授权

应该是：

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

---

另外，要考虑到头是区分大小写的

谢谢大家!！这起作用了。我以前尝试过这种语法，但是它都是小写的，这可以解释我的困难，因为这是正确的，但是我建议向后更改：发送

头：{“Authorization”：token}

，然后在服务器上查找

授权头

，不要使用自定义头进行身份验证。@xdumaine，你说得对，我完全同意！非常感谢。这起作用了。我以前尝试过这种语法，但是它都是小写的，这可以解释我的困难，因为这是正确的，但是我建议向后更改：发送

头：{“Authorization”：token}

，然后在服务器上查找

授权头

，不要使用自定义头进行身份验证。@xdumaine，你说得对，我完全同意！

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