How to get response headers in axios (and access missing headers)

Axios is my HTTP client of choice, on both Node.js and in the browser.

You can access headers in axios with response.headers.

axios.get('/api/some-route').then(function(response) {
  console.log(response.headers);
});

And you can access just the individual response headers you need with response.headers['header-name'].

For example, if you have a custom "x-version" response header telling you the version for your application, you can get it in axios using response.headers['x-version'].

axios.get('/api/some-route').then(function(response) {
  console.log(response.headers['x-version']); // "2.0.0"
});

But it's not always that simple. What if your headers are missing, or you get undefined?

I had my headers working in my development environment, but in production, I was getting undefined - super annoying. I spent hours head-scratching because my code wasn't working. In the end, it turned out the issue was CORS-related.

In this blog post I’ll cover:

• How to get response headers in axios
• How to set up CORS to access headers in production to fix missing headers

How to get response headers in axios

Well, I've kinda already covered this, but here's the example again:

axios.get('/api/some-route').then(function(response) {
  console.log(response.headers['x-version']); // "2.0.0"
});

Where 'x-version' is the name of the header I want to access.

Getting a header in a single response is great, but once you start adding multiple requests throughout your code, it can get a bit repetitive. Especially if you need this same header over and over again.

This is the use-case for my 'x-version' custom header. On every response from the server, I check what the version is so that I can refresh my app to get the latest version if there has been an update.

But I don't want to repeat this same code for every API response!

The great news is that you can also get response headers in axios interceptors and attach your code to every response!

// Add a response interceptor
axios.interceptors.response.use(function(response) {
  console.log(response.headers['x-version']); // "2.0.0"
  return response; // continue with response
});

This means you can check the response header (in this example the version), do something, and then return the response to continue its intended journey!

// Add a response interceptor
axios.interceptors.response.use(function(response) {
  if (response.headers['x-version'] > process.env.VERSION) { // if server version newer
    window.localStorage.setItem('version-update-needed', 'true'); // set version update item so can refresh app later
  };
  return response; // continue with response
});

And that's how you can get response headers in axios. Both from individual HTTP requests or by adding a response interceptor.

But if you're following along and your header is missing or undefined, keep reading - because it might not be an axios problem!

Access missing headers

If your header comes in as undefined, you might think there's a problem with your axios code. I know I did!

axios.get('/api/some-route').then(function(response) {
  console.log(response.headers['x-version']); // undefined
});

Because I could see the header when I inspected the response in the "Network" tab of the browser - so I knew the server was sending the header, and I knew the browser was receiving it.

But, confusingly, even if your browser receives the header, it might be a CORS issue that prevents axios from accessing it.

Even though the response header is visible in the browser, you might not have access to those headers through the API for security reasons - because of CORS.

axios.get('/api/some-route').then(function(response) {
  console.log(response.headers['x-version']); // undefined
});

This is mostly the case if you connect your front-end and back-end across different domains (or subdomains). E.g. if your server is on "server.yourdomain.com" and your website is at "www.yourdomain.com".

And if it is a CORS issue, you'll need to make some changes on the server so that your back end can expose those headers to the front end.

Ironically, it's a server response header that you'll need to tweak to fix your other response headers and make them accessible to axios. The response header you'll need to set is the Access-Control-Expose-Headers header.

If you're using Node.js on your server, here's how you can set this up with npm cors.

const cors = require('cors');

const corsOptions = {
  origin: ["https://www.yourdomain.com"],
  exposedHeaders: 'x-version', // ⬅️ exposes custom response headers
};

app.use(cors(corsOptions));

Now we can access the header in axios:

axios.get('/api/some-route').then(function(response) {
  console.log(response.headers['x-version']); // "2.0.0"
});

So if you are expecting to get a header back (and getting response headers with axios like in the examples above) but get undefined instead, check your CORS settings!