CODEWITHSUNDEEP
reactjsresttokenaxiosaccess-token
rakibtg
rakibtg

Reputation: 5921

Sending the bearer token with axios

In my react app i am using axios to perform the REST api requests.

But it's unable to send the Authorization header with the request.

Here is my code:

tokenPayload() {
  let config = {
    headers: {
      'Authorization': 'Bearer ' + validToken()
    }
  }
  Axios.post( 
      'http://localhost:8000/api/v1/get_token_payloads',
      config
    )
    .then( ( response ) => {
      console.log( response )
    } )
    .catch()
}

Here the validToken() method would simply return the token from browser storage.

All requests are having a 500 error response saying that

The token could not be parsed from the request

from the back-end.

How to send the authorization header with each requests? Would you recommend any other module with react?

Upvotes: 343

Views: 749557

Answers (19)

Sarvar Nishonboyev
Sarvar Nishonboyev

Reputation: 13110

You can create config once and use it everywhere.

const instance = axios.create({
  baseURL: 'https://example.com/api/',
  timeout: 1000,
  headers: {'Authorization': `Bearer ${token}`}
});

instance.get('/path')
.then(response => {
    return response.data;
})

Upvotes: 63

Muhammad Umar
Muhammad Umar

Reputation: 229

You're not passing the config object correctly to Axios. Config object should be passed as the third argument to Axios.post(), and data as the second argument.

tokenPayload() {
  let config = {
    headers: {
      'Authorization': 'Bearer ' + validToken()
    }
  };

  Axios.post(
    'http://localhost:8000/api/v1/get_token_payloads',
    {}, // pass an empty object as data if you don't have any data to send
    config
  )
  .then((response) => {
    console.log(response);
  })
  .catch(error => {
    console.error('Error:', error);
  });
}

Upvotes: 1

amboji alur
amboji alur

Reputation: 429

I used like this - Get API

      axios({
        method: "get",
        url: `api`,
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
      }).then((res) => {
        const data = res?.data;
        if (data?.isSuccess) {
         console.log("data>>>>>>",data)
        } else {
          console.log(data?.errorMessage);
        }
      });

Post API

    axios({
      method: "post",
      url: "api",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
      data: {
        name: "name",
        email: "email",
      },
    }).then((res) => {
      const data = res.data;
     if (data?.isSuccess) {
         console.log("data>>>>>>",data)
        } else {
          console.log(data?.errorMessage);
        }
    });

Upvotes: 0

Salahuddeen
Salahuddeen

Reputation: 81

try one of these✅:

pass an empty object/payload as a second parameter to Axios.post

axios.post(
'/api/user/get-user-info-by-id',  //first paramater
{},                               //pass empty object to second paramater
{
        headers: {
          Authorization: "Bearer "+ localStorage.getItem("token"),
        }
      })

or pass a null

axios.post('/api/user/get-user-info-by-id',null, {
        headers: {
          Authorization: "Bearer "+ localStorage.getItem("token"),
        }
      })

Upvotes: 0

mathnabit
mathnabit

Reputation: 370

You must mention the 2nd parameter body for the post request even if it is empty, try this :

tokenPayload() {
  let config = {
    headers: {
      'Authorization': 'Bearer ' + validToken()
    }
  }
  Axios.post( 
      'http://localhost:8000/api/v1/get_token_payloads',
      // empty body
      {},
      config
    )
    .then( (response) => {
      console.log(response)
    } )
    .catch()
}

Upvotes: 1

user16341444
user16341444

Reputation:

You can use interceptors in axios:


axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

More on that you can find here: https://axios-http.com/docs/interceptors

Upvotes: -2

ANORAK_MATFLY
ANORAK_MATFLY

Reputation: 385

You can try configuring the header like this:

const headers = {"Content-Type": "text/plain", "x-access-token": token}

Upvotes: 0

i-codena
i-codena

Reputation: 11

If you are sending a post request with empty data remember to always set the second parameter to either empty object or empty string just as in the example below. e.g: axios.post('your-end-point-url-here', '', config)

if you don't set it axios will assume that whatever you are passing as the second parameter is a formData

const config = {
      headers: { Authorization: `Bearer ${storage.getToken()}` }
    };
    axios
      .post('http://localhost:8000/api/v1/get_token_payloads', {}, config)
      .then(({ data: isData }) => {
        console.log(isData);
      })
      .catch(error => {
        console.log(error);
      });

Upvotes: 1

Ilyas karim
Ilyas karim

Reputation: 4812

Here is a unique way of setting Authorization token in axios. Setting configuration to every axios call is not a good idea and you can change the default Authorization token by:

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:1010/'
axios.defaults.headers.common = {'Authorization': `bearer ${token}`}
export default axios;

Some API require bearer to be written as Bearer, so you can do:

axios.defaults.headers.common = {'Authorization': `Bearer ${token}`}

Now you don't need to set configuration to every API call. Now Authorization token is set to every axios call.

Upvotes: 187

Mohammed Al-Reai
Mohammed Al-Reai

Reputation: 2816

// usetoken is hook i mad it

export const useToken = () => {
     return JSON.parse(localStorage.getItem('user')).token || ''
}
const token = useToken();



const axiosIntance = axios.create({
    baseURL: api,
    headers: {
        'Authorization':`Bearer ${token}`
    }
});

axiosIntance.interceptors.request.use((req) => {
    if(token){
        req.headers.Authorization = `Bearer ${token}`;
    }
    return req;
})

Upvotes: 2

afshar003
afshar003

Reputation: 839

there are a lot of good solution but I use this

let token=localStorage.getItem("token");

var myAxios=axios.create({
  baseURL: 'https://localhost:5001',
  timeout: 700,
  headers: {'Authorization': `bearer ${token}`}
});

export default myAxios;

then i import myaxios to my file and

myAxios.get("sth")

Upvotes: -2

Dinindu Kanchana
Dinindu Kanchana

Reputation: 353

I use a separate file to init axios instance and at the same time, I add intercepters to it. Then in each call, the intercepter will add the token to the request header for me.

import axios from 'axios';
import { getToken } from '../hooks/useToken';

const axiosInstance = axios.create({
  baseURL: process.env.REACT_APP_BASE_URL,
});

axiosInstance.interceptors.request.use(
  (config) => {
    const token = getToken();
    const auth = token ? `Bearer ${token}` : '';
    config.headers.common['Authorization'] = auth;
    return config;
  },
  (error) => Promise.reject(error),
);

export default axiosInstance;

Here is how I use it in the service file.

import { CancelToken } from 'axios';
import { ToolResponse } from '../types/Tool';
import axiosInstance from './axios';

export const getTools = (cancelToken: CancelToken): Promise<ToolResponse> => {
  return axiosInstance.get('tool', { cancelToken });
};

Upvotes: 6

Hasan Zahran
Hasan Zahran

Reputation: 1452

Just in case someone faced the same issue.

The issue here is when passing the header without data, the header's configuration will be in the payload data, So I needed to pass null instead of data then set the header's configuration.

const config = {
         headers: {
             "Content-type": "application/json",
              "Authorization": `Bearer ${Cookies.get("jwt")}`,
         },
    };    
axios.get(`${BASE_URL}`, null, config)

Upvotes: 12

Ernesto
Ernesto

Reputation: 4272

axios by itself comes with two useful "methods" the interceptors that are none but middlewares between the request and the response. so if on each request you want to send the token. Use the interceptor.request.

I made apackage that helps you out:

$ npm i axios-es6-class

Now you can use axios as class 

export class UserApi extends Api {
    constructor (config) {
        super(config);

        // this middleware is been called right before the http request is made.
        this.interceptors.request.use(param => {
            return {
                ...param,
                defaults: {
                    headers: {
                        ...param.headers,
                        "Authorization": `Bearer ${this.getToken()}`
                    },
                }
            }
        });

      this.login = this.login.bind(this);
      this.getSome = this.getSome.bind(this);
   }

   login (credentials) {
      return this.post("/end-point", {...credentials})
      .then(response => this.setToken(response.data))
      .catch(this.error);
   }


   getSome () {
      return this.get("/end-point")
      .then(this.success)
      .catch(this.error);
   }
}

I mean the implementation of the middleware depends on you, or if you prefer to create your own axios-es6-class https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a it is the medium post where it came from

Upvotes: -2

Doctor
Doctor

Reputation: 7996

const config = {
    headers: { Authorization: `Bearer ${token}` }
};

const bodyParameters = {
   key: "value"
};

Axios.post( 
  'http://localhost:8000/api/v1/get_token_payloads',
  bodyParameters,
  config
).then(console.log).catch(console.log);

The first parameter is the URL.
The second is the JSON body that will be sent along your request.
The third parameter are the headers (among other things). Which is JSON as well.

Upvotes: 406

aneesh
aneesh

Reputation: 451

By using Axios interceptor:

const service = axios.create({
  timeout: 20000 // request timeout
});

// request interceptor

service.interceptors.request.use(
  config => {
    // Do something before request is sent

    config.headers["Authorization"] = "bearer " + getToken();
    return config;
  },
  error => {
    Promise.reject(error);
  }
);

Upvotes: 35

gdfgdfg
gdfgdfg

Reputation: 3566

This works and I need to set the token only once in my app.js:

axios.defaults.headers.common = {
    'Authorization': 'Bearer ' + token
};

Then I can make requests in my components without setting the header again.

"axios": "^0.19.0",

Upvotes: 10

Neel Patel
Neel Patel

Reputation: 2176

If you want to some data after passing token in header so that try this code

const api = 'your api'; 
const token = JSON.parse(sessionStorage.getItem('data'));
const token = user.data.id; /*take only token and save in token variable*/
axios.get(api , { headers: {"Authorization" : `Bearer ${token}`} })
.then(res => {
console.log(res.data);
.catch((error) => {
  console.log(error)
});

Upvotes: 18

Nick Uraltsev
Nick Uraltsev

Reputation: 25917

The second parameter of axios.post is data (not config). config is the third parameter. Please see this for details: https://github.com/mzabriskie/axios#axiosposturl-data-config

Upvotes: 34

Related Questions