Axios get access to response header fields

This really helped me, thanks Nick Uraltsev for your answer.

For those of you using nodejs with cors:

...
const cors = require('cors');

const corsOptions = {
  exposedHeaders: 'Authorization',
};

app.use(cors(corsOptions));
...

In the case you are sending the response in the way of res.header('Authorization', `Bearer ${token}`).send();

Faced same problem in asp.net core Hope this helps

public static class CorsConfig
{
    public static void AddCorsConfig(this IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder
                .WithExposedHeaders("X-Pagination")
                );
        });
    }
}

I was facing the same problem. I did this in my WebSecurity.java, it's about the setExposedHeaders method in the CORS configuration.

@Bean
CorsConfigurationSource corsConfigurationSource() {

    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowCredentials(true);
    configuration.setAllowedOrigins(Arrays.asList(FRONT_END_SERVER));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE"));
    configuration.setAllowedHeaders(Arrays.asList("X-Requested-With","Origin","Content-Type","Accept","Authorization"));
    
    // This allow us to expose the headers
    configuration.setExposedHeaders(Arrays.asList("Access-Control-Allow-Headers", "Authorization, x-xsrf-token, Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, " +
            "Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"));
    
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

I hope it works.

In axios CORS requests, browsers can access only few headers by default.

But if you need to access a custom header from response, you have to send response with Access-Control-Expose-Headers form your backend server.

Hare is a example for Nodejs backend and Reactjs front end:

res.header('Access-Control-Expose-Headers', 'x-xsrf-token');

return res.header("x-xsrf-token", token).status(200)
           .send({
                id: user.id,
                email: user.email,
            });

res.header('Access-Control-Expose-Headers', 'x-xsrf-token');

for this line I can log my custom header like

axios.post("/login", {
            email: emailInput.current.value,
            password: passwordInput.current.value,
        })
        .then(function (response) {

            console.log(response.headers["x-xsrf-token"]);

        });

Without Access-Control-Expose-Headers in your response you will get undefine in console log. Check your response header in network tab that it contains the header with your custom name with it.

Custom HTTP headers can not be accessed on client-side due to CORS restrictions. You need to add Access-Control-Expose-Headers setting on the server-side.

What are Access-Control-Expose-Headers?
Please go to https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

By default only these HTTP headers are exposed:

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

For custom HTTP headers, you need to customize Access-Control-Expose-Headers in response headers.

If you are using Django on the server side you can use django-cors-headers (https://pypi.org/project/django-cors-headers/) for CORS settings management.

For example, with django-cors-headers you can add a list of HTTP headers that are to be exposed to the browser by CORS_ALLOW_HEADERS setting

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = list(default_headers) + [
    'my-custom-header',
]

According to official docs:

This may help if you want the HTTP headers that the server responded with. All header names are lower cased and can be accessed using the bracket notation. Example: response.headers['content-type'] will give something like: headers: {},

There is one more hint that not in this conversation. for asp.net core 3.1 first add the key that you need to put it in the header, something like this:

Response.Headers.Add("your-key-to-use-it-axios", "your-value");

where you define the cors policy (normaly is in Startup.cs) you should add this key to WithExposedHeaders like this.

          services.AddCors(options =>
        {
        options.AddPolicy("CorsPolicy",
            builder => builder
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowAnyOrigin()
                .WithExposedHeaders("your-key-to-use-it-axios"));
        });
    }

you can add all the keys here. now in your client side you can easily access to the your-key-to-use-it-axios by using the response result.

          localStorage.setItem("your-key", response.headers["your-key-to-use-it-axios"]);

you can after use it in all the client side by accessing to it like this:

const jwt = localStorage.getItem("your-key")

In case you're using Laravel 8 for the back-end side with CORS properly configured, add this line to config/cors.php:

'exposed_headers' => ['Authorization'],

for django help

CORS_EXPOSE_HEADERS = [
        'your header'
    ]

For the SpringBoot2 just add

httpResponse.setHeader("Access-Control-Expose-Headers", "custom-header1, custom-header2");

to your CORS filter implementation code to have whitelisted custom-header1 and custom-header2 etc

For Spring Boot 2 if you don't want to use global CORS configuration, you can do it by method or class/controller level using @CrossOrigin adnotation with exposedHeaders atribute.

For example, to add header authorization for YourController methods:

@CrossOrigin(exposedHeaders = "authorization")
@RestController
public class YourController {
    ...
}

try like this

            .then(res =>{
                console.log(res);
                console.log(res.headers['x-total-count']);
                setTotalRecords(res.headers['x-total-count']);
                setTableData(res.data);
            });

Below the list of clear steps to make sure you don't need to spend the whole evening googling as I did. I address the matter of how to read the Authorization header in the axios response (!).

For the back-end I am using standard ExpressJS. I am using: cors() and helmet() middleware in Express with the empty configuration but the below works nonetheless.

1. Make sure your backend sends Access-Control-Expose-Headers. At the begining set it to * to eliminate other possibilities. In Express, this going to be:

res.setHeader('Access-Control-Expose-Headers', '*')

2. Make sure your backend sends Access-Control-Allow-Headers. Don't confuse with the 1st. step as both sound similar. Set this to cover all the headers you want to read from. In my case:

res.setHeader('Access-Control-Allow-Headers', 'Authorization,x-client-session')

3. In your front-end app, Axios will return "AxiosHeaders" type for the headers. You should have your headers exposed now. Specifically for Authorization use:

const res = await axios(init)
const authHeader = res.headers.getAuthorization()

Even in the most up to date package version you may get TypeScript error that: This expression is not callable but it is.

This is it.

[expanding on what @vladimir said]

if you're using Django
and django-cors-headers to allow/control CORS, you should set the following, in your settings.py

CORS_EXPOSE_HEADERS = ['yourCustomHeader']

If you are using Django without django-cors-headers, you can write custom middleware.

class CustomCorsMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        response['Access-Control-Expose-Headers'] = 'MY-HEADER, ANOTHER-HEADER'

        return response

You can also set other CORS heades here.

Then you should register your middleware by inserting it at the beggining of the MIDDLEWARE list in your project's settings.py file.

MIDDLEWARE = [
    'myapp.middleware.CustomCorsMiddleware',
    ...
]

If you are working with Spring Boot 3 and Spring Security 6 or up, this could work:

In your @Configuration class includes this:

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
    
        config.addAllowedOrigin("*");
        config.addAllowedMethod("*");
    
        //Allow several headers
        config.addAllowedHeader("Authorization");
        config.addAllowedHeader("X-Custom-Header");
        config.addAllowedHeader("Another-Header");
    
        // Expose custom headers
        config.addExposedHeader("Authorization");
        config.addExposedHeader("X-Custom-Header");
        config.addExposedHeader("Another-Header");
    
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }

Be careful cause the previous configuration is so general.

If you are using FastAPI then here are the steps:

1. Setup CORS properly and Add access-control-expose-headers via CORS middleware
2. Add the header you want to expose in your api responses
3. Access the header from axios response

Setup CORS properly and Add access-control-expose-headers :

from fastapi import FastAPI    
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()
app.add_middleware(
                CORSMiddleware,
                allow_origins=["your-api-url"] # can be * in development
                allow_credentials=True,
                allow_methods=["*"],
                allow_headers=["*"],
                expose_headers=["my-header"], # FastApi will automatically add access-control-expose-headers with 'my-header' as value to all api responses
)

Add the header you want to expose in your api responses:

from fastapi import APIRouter
from fastapi.responses import JSONResponse

router = APIRouter()
@router.post("/yolo")
async def Yolo():
    message = "This will come with a header named 'my-header'"
    return JSONResponse(
        content={
            "message": message,
        },
        headers={"my-header":"yolo"}

    )

Access the header from axios response:

axios.post('your-api-url/yolo', {}).then((resp) => { console.log(resp.headers['my-header'])})

You can check in the your browser's network tab if access-control-expose-headers is being set correctly. If its set correctly and its value matches the header you are sending then axios will be able to access the header you exposed.