302

I'm building a frontend app with React and Redux and I'm using axios to perform my requests. I would like to get access to all the fields in the header of the response. In my browser I can inspect the header and I can see that all the fields that I need are present(such as token, uid, etc...), but when I call

const request = axios.post(`${ROOT_URL}/auth/sign_in`, props);
request.then((response)=>{
  console.log(response.headers);
});

I get just

Object {content-type: "application/json; charset=utf-8", cache-control: "max-age=0, private, must-revalidate"}

Here my browser network tab,as you can see all the other fields are present.

enter image description here

Bests.

3
  • 1
    If you print out axios.defaults.headers does that give you any of the one's you're missing? Some headers are configured at that level, not at that of each request (see github.com/mzabriskie/axios#global-axios-defaults)
    – Ben Hare
    Jun 18, 2016 at 21:16
  • 6
    Is not it axios.defaults.headers for configure the REQUEST header params? I need to access the RESPONSE one. @BenHare
    – TWONEKSONE
    Jun 19, 2016 at 12:32
  • 2
    BTW, what you called request, is not a request. It's a promise for your response. Your request was what you passed to the post() method as arguments.
    – Daniel B
    Jun 27, 2017 at 13:08

15 Answers 15

517

In case of CORS requests, browsers can only access the following response headers by default:

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

If you would like your client app to be able to access other headers, you need to set the Access-Control-Expose-Headers header on the server:

Access-Control-Expose-Headers: Access-Token, Uid
8
  • 1
    My bad I forgot to expose that fields.
    – TWONEKSONE
    Jun 27, 2016 at 15:39
  • 41
    If you are using Rails with Rack-Cors you need to set expose: ['Access-Token', 'Uid'] on the origin like: resource '*', :headers => :any, :methods => [:get, :post, :put, :patch, :delete, :options, :head], expose: ['Access-Token', 'Uid']
    – CWitty
    Sep 25, 2017 at 20:39
  • 9
    I don't get it. If they are not exposed, why are the additional headers visible in the browser but not in the axios response?
    – adanilev
    Nov 30, 2018 at 1:09
  • 13
    @adanilev, browsers allow you to see them for debugging purposes, but prevent you from accessing them through APIs for security reasons. It prevents clients from getting secured credentials from servers, allowing the server to determine what access a client has. TLDR: it's done on purpose for security
    – erfling
    Jan 25, 2019 at 14:29
  • 5
    I have this in my NGINX confg file... 'Access-Control-Expose-Headers' 'Authorization, X-Suggested-Filename, content-disposition' always; Still only see content-type: "application/pdf" really need to pull content-disposition Sep 27, 2019 at 20:56
42

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

1
  • 3
    For those wondering, you could pass an array here too: exposedHeaders: ['Authorization','X-Total-Count'] Mar 26, 2020 at 18:25
19

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.

0
17

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")
                );
        });
    }
}
1
  • 2
    Welcome to SO! Your answer may be correct but at StackOverflow, it is discouraged to post code only answer. Please try to provide an explanation of how your answer solves the original question. please read this on how to Write Better Answer
    – nircraft
    Apr 16, 2019 at 19:09
7

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: {},

6

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")
5

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',
]

3

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'],

1
  • 1
    Thank you for that. I tried the wildcard '*' , which did'nt work, but using your answer as help it really helped me.
    – LuiKang
    Sep 12, 2021 at 16:27
3

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.

2

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

2

try like this

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

for django help

CORS_EXPOSE_HEADERS = [
        'your header'
    ]
1
  • At least for Flask CORS, you can also pass a dict where each key is named CORS_<property> (in this case expose_headers) and pass it with the desired values in the CORS(app, **cors_config) statement. See docs here
    – cpinamtz
    Apr 1, 2021 at 13:37
1

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 {
    ...
}
1

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',
    ...
]
0

[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']

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.