Los axios obtienen acceso a los campos de encabezado de respuesta

Estoy creando una aplicación frontend con React y Redux y estoy usando axios para realizar mis solicitudes. Me gustaría tener acceso a todos los campos en el encabezado de la respuesta. En mi navegador puedo inspeccionar el encabezado y puedo ver que todos los campos que necesito están presentes (como token, uid, etc.), pero cuando llamo

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

Solo consigo

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

Aquí mi pestaña de red del navegador, como puede ver, todos los demás campos están presentes.

Bests.

En caso de solicitudes CORS, los navegadores solo pueden acceder a los siguientes encabezados de respuesta de forma predeterminada:

• Control de caché
• Lenguaje de contenido
• Tipo de contenido
• Expira
• Última modificación
• Pragma

Si desea que su aplicación cliente pueda acceder a otros encabezados, debe configurar el encabezado Access-Control-Expose-Headers en el servidor:

Access-Control-Expose-Headers: Access-Token, Uid

Esto realmente me ayudó, gracias Nick Uraltsev por tu respuesta.

Para aquellos de ustedes que usan nodejs con cors :

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

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

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

En el caso de que envíe la respuesta en la forma de res.header('Authorization', `Bearer ${token}`).send();

Estaba enfrentando el mismo problema. Hice esto en mi "WebSecurity.java", se trata del método setExposedHeaders en la configuración de cors.

@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;
}

Espero que funcione.

Enfrenté el mismo problema en asp.net core Espero que esto ayude

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

Según los documentos oficiales :

Esto puede ayudar si desea los encabezados HTTP con los que respondió el servidor . Todos los nombres de encabezado están en minúsculas y se puede acceder mediante la notación de corchetes. Ejemplo: response.headers['content-type']dará algo como: encabezados: {},

Para el SpringBoot2 solo agregue

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

a su código de implementación de filtro CORS para incluirlo en la lista blanca custom-header1y custom-header2etc.

para ayuda de django

CORS_EXPOSE_HEADERS = [
        'your header'
    ]

Para Spring Boot 2, si no desea utilizar la configuración global de CORS, puede hacerlo por método o nivel de clase / controlador utilizando una @CrossOriginnotación con exposedHeadersatributo.

Por ejemplo, para agregar encabezado authorizationpara YourControllermétodos:

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