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

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));

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.