web-dev-qa-db-ja.com

axiosでヘッダーにJWTを渡す

ノードのバックエンドで小さなプロジェクトを作成し、フロントエンドに反応してREST呼び出しを使用しましたAxiosライブラリ。ヘッダーにFailed to load resource: the server responded with a status of 401 (Unauthorized)というエラーが表示され続けます。2つのメソッドが見つかりましたが、両方とも機能しませんでした。

彼らです

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

そして

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

ただし、郵便配達員を使用する場合、バックエンドから必要なデータを取得しています。この不正なエラーが表示される特定の理由は？.

http-headersaxios
14
Madushika Perera

次のように、トークンの前に 'Bearer'を連結する必要があります。

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