使用axios在头部传递JWT

Question

我用Node做后台和React做前端开发了一个小项目，通过REST请求获取数据。我使用了Axios库，但是当我传递头信息时，一直出现以下错误：

无法加载资源：服务器响应状态为401（未经授权）。

我尝试了两种方法，但都没有成功。它们分别是：

export const getUsersDetails=()=>{
  console.log('calling');
  return (dispatch) => {
    return axios.get('http://localhost:3030/users',{headers: { "Authorization": localStorage.getItem('jwtToken') }}).then((data)=>{
                 console.log('data comming',data);
                dispatch(getUsersData(data));
            }).catch((error)=>{
              console.log('error comming',error);
                dispatch(errorgetUsersData(error));
            });
        };
}

and

axios.defaults.headers.common['Authorization'] = localStorage.getItem('jwtToken');

但是当我使用Postman时，我可以从后端获取所需的数据。为什么我会一直收到未经授权的错误？

- Madushika Perera

---

JWT代表JSON Web Token。当您使用变量名jwtToken时，它实际上读起来像“JSON Web Token Token”。我建议省略冗余并仅使用jwt（或者可能是其他非冗余的名称）。 - cezar

Answer 1

您需要在令牌前面连接“Bearer”，像这样：

在令牌前面连接“Bearer”，像这样：

axios.defaults.headers.common['Authorization'] = 
                                'Bearer ' + localStorage.getItem('jwtToken');

- dplaza

---

这里只有 axios.defaults.headers.Authorization = 'Bearer ' + localStorage.getItem('jwtToken'); 起作用。顺便说一下，我正在使用 Vue 并将其放置在 main.js 中。 - Fusseldieb

你好，Fusseldieb、dplaza或Clonkex，能否更新一下代码？我不明白在哪里放置它：axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('jwtToken'); 抱歉，我遇到了同样的问题。 - Freddy Daniel