Reactjs – How to pass authorization token in header to react Axios.post

apiaxiospostreactjsrest

My application with React, Express, MongoDB.

I want to pass auth token with header for Axios post request.

But, when I am trying to pass it, getting 403 error (Forbidden).

Local Storage

here I am retrieving all auth data from local storage

export function authHeader() {
    // return authorization header with basic auth credentials
    let user = JSON.parse(localStorage.getItem('user'));

    if (user && user.token) {
        return { Authorization: `Bearer ${user.token}` };
    } else {
        return {};
    }
}

Axios.post

here i am calling the axios post request

import React, { Component } from 'react'
import Axios from 'axios';
import { authHeader } from '../../../helpers'

export default class SubAdmin extends Component {
    constructor(props) {
        super(props)

        this.state = {
            user: {},
            users: [],
            error: null,
            isLoaded: false,
            items: []
        }
    };

    componentDidMount() {
        this.setState({
            user: JSON.parse(localStorage.getItem('user')),
            users: { loading: true }
        });
        Axios.post('http://localhost:4200/api/viewSubAdmin', 
                    {
                        headers: authHeader()
                    }).then(
          result => {
              console.log(result);

            this.setState({
              isLoaded: true,
              items: result.data
            });
          },
          error => {
            this.setState({
              isLoaded: true,
              error
            });
          }
          );
      }

API Header and Response

this is the response i am getting from my browser

Request URL: http://localhost:4200/api/viewSubAdmin
Request Method: POST
Status Code: 403 Forbidden
Remote Address: [::1]:4200
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 9
Content-Type: text/plain; charset=utf-8
Date: Mon, 23 Mar 2020 10:04:33 GMT
ETag: W/"9-PatfYBLj4Um1qTm5zrukoLhNyPU"
X-Powered-By: Express
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 171
Content-Type: application/json;charset=UTF-8
Host: localhost:4200
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36
{headers: {,…}}
headers: {,…}
Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhZG1pbiI6IjEyMzQ1Njc4OSIsImlhdCI6MTU4NDk1MDM3MH0.Bk4q3qEsVrA8TDn7Bbk5M689B-6uVfg4r9FTmfDTWc4"

My postman call is working fine

POST: http://localhost:4200/api/viewSubAdmin
Headers: Authorization:"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhZG1pbiI6IjEyMzQ1Njc4OSIsImlhdCI6MTU4NDk1MDM3MH0.Bk4q3qEsVrA8TDn7Bbk5M689B-6uVfg4r9FTmfDTWc4",
Response Body: {
    "subadmin_details": [
        [
            {
                "isBlocked": false,
                "_id": "5e5749872eb4ab0ff5c037f9",
                "name": "abcd",
                "password": "123456",
                "admintype": "subadmin"
            },
            {
                "isBlocked": false,
                "_id": "5e574b4a2eb4ab0ff5c037fb",
                "name": "abcde",
                "password": "123456",
                "admintype": "subadmin"
            },
            {
                "isBlocked": false,
                "_id": "5e57c2b7fe57bc7a7165cd64",
                "name": "12345678",
                "password": "12345678",
                "admintype": "subadmin",
                "__v": 0
            },
            {
                "isBlocked": false,
                "_id": "5e57c31594c9287afdf186f9",
                "name": "1234567",
                "password": "1234567",
                "admintype": "subadmin",
                "__v": 0
            },
            {
                "isBlocked": false,
                "_id": "5e57c3266dfbde7b1507453a",
                "name": "123456",
                "password": "123456",
                "admintype": "subadmin",
                "__v": 0
            }
        ]
    ]
}

Best Answer

Axios.post receive url, data and headers as parameters in order. If you only pass url and headers, you have to pass null as data

axios.post(url, null, headers)

or you can try Axios api

Axios({
    method: 'post',
    url: 'http://localhost:4200/api/viewSubAdmin',
    headers: authHeader()
}).then.....