I developed an application recently that had a Net Core API backend and a React front end. The React app, which uses Axios, needed to get a custom header from the API request. This custom header would be used to pass pagination data between the two systems.
I’ve already written a post explaining how to expose a custom header property in a .Net Core Api – now this post will focus on how to access the custom response header property in the React app.
Get a custom HTTP response header with Axios
I’ll cut straight to the chase and give you the code you need to get the custom response header in your React code. In this example x-pagination is the name of the custom header that I want to use. In your case it may be called something different, so make sure you have the name exactly right. Remember it is case sensitive :
response?.headers?.["x-pagination"]
Looking at a full example, you may recognise this code from my GET data using Axios in React post. Building on that code we would get the header like this:
const getData = () => {
// GET request for products from fakestore API
axios({
method: "get",
baseURL: "https://fakestoreapi.com",
url: "/products",
})
.then(function (response) {
// handle response and get custom header here
var pagination = response?.headers?.["x-pagination"];
//use data ....
})
.catch(function (error) {
// handle error
console.log(error);
});
};
If you try this and are sure you’ve got the property name right, and you STILL can’t get to the property then read on for a possible explanation why.
Be aware – see the custom header in Postman
It can sometimes be really confusing if you test the endpoint you are using and can see the custom header in Postman, and yet you just can’t seem to access it in the front end code.
This means the API has not exposed the custom header properly and you’ll need to ask the API developer to make that change. If this is the case you may well be getting a message telling you something like:
axios response headers undefined