How to set HTTP headers in Axios

#javascript #axios

Last updated on May 25, 2021 by Suraj Sharma



In this tutorial, you will learn how you can

  1. set HTTP headers in axios, and

  2. set global headers to all HTTP requests in axios



Set HTTP Headers


You can pass a headers property to the Axios request config

For example,

const axios = require('axios').default;

// or
// import axios from 'axios';

axios({
    url:/user’,
    method: 'post',
    Headers: {
    Authorization: `Bearer ${yourToken}`
    Content-Type: ‘application/json’
}).then((response)=>{
  console.log(response.data)
});

where the method property is set to HTTP POST method, and the headers property contains one request header and one representation header



Set Global Default Headers


If you want to set common headers to all HTTP requests, then you use Axios config defaults to set headers


axios.defaults.headers.common["Authorization"] = `Bearer ${token}`

Or you can set common headers to all POST requests as


axios.defaults.headers.post["Content-Type"] = 'application/json'


Related Solutions


Rate this post


Suraj Sharma is a Full Stack Software Engineer. He holds a B.Tech degree in Computer Science & Engineering from NIT Rourkela.