Axios get access to response header fields

Question

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   gt     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     Bests

User · Answer

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

User · Answer

Faced same problem in asp net core Hope this helps  public static class CorsConfig       public static void AddCorsConfig this IServiceCollection services                services AddCors options   gt                        options AddPolicy  CorsPolicy                   builder   gt  builder                  WithExposedHeaders  X-Pagination

User · Answer

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

User · Answer

for django help   CORS EXPOSE HEADERS              your header

User · Answer

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

User · Answer

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  quot your-key-to-use-it-axios quot    quot your-value quot     where you define the cors policy  normaly is in Startup cs  you should add this key to WithExposedHeaders like this            services AddCors options   gt                    options AddPolicy  quot CorsPolicy quot               builder   gt  builder                  AllowAnyHeader                    AllowAnyMethod                    AllowAnyOrigin                    WithExposedHeaders  quot your-key-to-use-it-axios quot                        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  quot your-key quot   response headers  quot your-key-to-use-it-axios quot      you can after use it in all the client side by accessing to it like this  const jwt   localStorage getItem  quot your-key quot

User · Answer

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

User · Answer

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

User · Answer

I was facing the same problem  Y 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

User · Answer

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    gt    Authorization

User · Answer

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    quot authorization quot    RestController public class YourController

[http-headers] Axios get access to response header fields

Examples related to http-headers

Examples related to es6-promise

Examples related to axios