Adding Custom Headers in Axios: A Simple Guide

When working with APIs, you'll often need to send additional information along with your requests. This information is usually passed through HTTP headers for authentication, tracking, content negotiation, and more.

In this article, we'll learn how to send custom headers using Axios.

Understanding Axios Request Syntax

Axios methods generally follow this pattern:

axios.method(url, data, options);

Where:

url → API endpoint
data → Request payload (for POST, PUT, PATCH, etc.)
options → Configuration object containing headers and other settings

For GET requests, there is no request body:

axios.get(url, options);
Adding Custom Headers

Custom headers are passed inside the headers property of the configuration object.

GET Request Example

axios.get('https://api.example.com/users', {
  headers: {
    'custom-header-key': 'your value'
  }
});

POST Request Example

axios.post(
  'https://api.example.com/users',
  {
    name: 'John Doe'
  },
  {
    headers: {
      'custom-header-key': 'your value'
    }
  }
);

Multiple Custom Headers

You can send multiple headers in the same request.

axios.get('https://api.example.com/users', {
  headers: {
    'Authorization': 'Bearer your-token',
    'X-App-Version': '1.0.0',
    'custom-header-key': 'your value'
  }
});

Using Variables for Headers

In real-world applications, header values are often dynamic.

const token = localStorage.getItem('token');

axios.get('https://api.example.com/profile', {
  headers: {
    Authorization: `Bearer ${token}`
  }
});

Creating Reusable Axios Instances

If you use the same headers across multiple requests, create an Axios instance.

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'custom-header-key': 'your value'
  }
});

api.get('/users');
api.post('/posts', {
  title: 'Hello World'
});

Complete Example

import axios from 'axios';

axios.post(
  'https://api.example.com/login',
  {
    email: 'user@example.com',
    password: 'password123'
  },
  {
    headers: {
      'custom-header-key': 'your value',
      'Content-Type': 'application/json'
    }
  }
)
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

Key Takeaways

Custom headers are added inside the headers object.
For GET requests, pass headers as the second argument.
For POST, PUT, and PATCH requests, headers are passed in the third argument.
Use Axios instances to avoid repeating common headers.
Headers are commonly used for authentication, API keys, and request metadata.

That's all! Adding custom headers in Axios is straightforward and helps you communicate additional information with your API requests efficiently.