Skip to main content

How to Get Response Headers from an Axios Request in JavaScript

When you make an HTTP request with a library like Axios, the response contains more than just the body data. It also includes valuable metadata in the form of HTTP headers, such as content-type, cache-control, or custom headers like x-request-id. Accessing these headers is essential for tasks like handling pagination, reading rate-limit information, or processing authentication tokens.

This guide will teach you how to access response headers from an Axios request and explain the critical limitations imposed by browser CORS policies that you need to be aware of.

The Core Method: Accessing response.headers​

When an Axios request is successful, the response object it returns contains a headers property. This property is an object where the keys are the lowercase names of the response headers and the values are their corresponding string values.

axios.get(url)
  .then(response => {
    // Access the full headers object
    const headers = response.headers;
    
    // Access a specific header (note the lowercase key)
    const contentType = headers['content-type'];
  });

Basic Example: Reading Standard Headers​

Let's make a request to a public API and inspect its headers.

For example, you need to get the content-type and date headers from an API response.

The Solution is using async/await:

import axios from 'axios';

async function logResponseHeaders() {
  try {
    const response = await axios.get('https://api.example.com/posts/1');
    
    console.log('All headers:', response.headers);
    
    // Access specific headers using lowercase keys
    const contentType = response.headers['content-type'];
    const date = response.headers['date'];
    
    console.log('Content-Type:', contentType);
    console.log('Date:', date);

  } catch (error) {
    console.error('Request failed:', error);
  }
}

logResponseHeaders();

Output:

Content-Type: application/json; charset=utf-8
Date: Sat, 18 Oct 2025 20:00:00 GMT

The CORS Problem: Why Some Headers are Not Accessible​

You might notice that even if you can see a header in your browser's Network tab, you cannot access it from your JavaScript code via response.headers. This is a security feature related to Cross-Origin Resource Sharing (CORS).

By default, for a cross-origin request, browsers only expose a small set of "CORS-safelisted" response headers to your code. These are:

  • Cache-Control
  • Content-Language
  • Content-Length
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma
note

If the server sends a custom header like X-Session-Token, your browser will block your JavaScript code from reading it unless the server explicitly allows it.

The Server-Side Solution: Access-Control-Expose-Headers​

To make a non-safelisted header accessible to a client-side script, the server must include the Access-Control-Expose-Headers header in its response. This header is a comma-separated list of the names of the headers that the server is allowing the browser to expose to your code.

For example, your API sends a custom X-Total-Count header for pagination, but response.headers['x-total-count'] is undefined in your JavaScript.

The Solution is on the server side.

  • The server's response must include the following header: Access-Control-Expose-Headers: X-Total-Count

For example, if you are using Node.js with the cors package for Express, you would configure it like this:

// Server-side Express.js example
import cors from 'cors';

const corsOptions = {
  exposedHeaders: ['X-Total-Count', 'X-Request-Id'], // Can be an array or string
};

app.use(cors(corsOptions));
note

Once this server-side change is deployed, your client-side JavaScript will be able to access the x-total-count header on the Axios response object.

Conclusion​

Accessing response headers in Axios is a straightforward process, but it is governed by browser security policies.

  • To access headers from an Axios response, use the response.headers object. Remember that all header keys are converted to lowercase.
  • If you are trying to access a header from a cross-origin request and it is undefined in your code (but visible in the Network tab), the issue is almost certainly CORS.
  • The server must send the Access-Control-Expose-Headers header to explicitly allow your client-side code to read any non-safelisted headers.

Table of Contents