Axios uzyskuje dostęp do pól nagłówka odpowiedzi

Buduję aplikację frontendową za pomocą React i Redux i używam axios do wykonywania moich żądań. Chciałbym uzyskać dostęp do wszystkich pól w nagłówku odpowiedzi. W swojej przeglądarce mogę sprawdzić nagłówek i widzę, że wszystkie potrzebne pola są obecne (takie jak token, uid itp.), Ale kiedy dzwonię

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

Po prostu

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

Tutaj moja karta sieciowa przeglądarki, jak widać, wszystkie inne pola są obecne.

Bests.

W przypadku żądań CORS przeglądarki domyślnie mają dostęp tylko do następujących nagłówków odpowiedzi:

• Cache-Control
• Język treści
• Typ zawartości
• Wygasa
• Ostatnio zmodyfikowany
• Pragma

Jeśli chcesz, aby Twoja aplikacja kliencka miała dostęp do innych nagłówków, musisz ustawić nagłówek Access-Control-Expose-Headers na serwerze:

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

To naprawdę mi pomogło, dziękuję Nickowi Uraltsevowi za odpowiedź.

Dla tych z Was, używając nodejs z Cors :

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

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

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

W przypadku, gdy wysyłasz odpowiedź w drodze res.header('Authorization', `Bearer ${token}`).send();

Miałem ten sam problem. Zrobiłem to w moim „WebSecurity.java”, chodzi o metodę setExposedHeaders w konfiguracji 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;
}

Mam nadzieję, że to zadziała.

Napotkano ten sam problem w asp.net core Mam nadzieję, że to pomoże

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

Według oficjalnych dokumentów :

Może to pomóc, jeśli potrzebujesz nagłówków HTTP, którymi odpowiedział serwer . Wszystkie nazwy nagłówków są pisane małymi literami i można uzyskać do nich dostęp za pomocą notacji w nawiasach. Przykład: response.headers['content-type']da coś takiego: headers: {},

W przypadku SpringBoot2 po prostu dodaj

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

do kodu realizacji CORS filtra się na białej liście custom-header1i custom-header2etc

o pomoc django

CORS_EXPOSE_HEADERS = [
        'your header'
    ]

W przypadku Spring Boot 2, jeśli nie chcesz używać globalnej konfiguracji CORS, możesz to zrobić za pomocą metody lub poziomu klasy / kontrolera, używając @CrossOriginadnotacji z atribute exposedHeaders.

Na przykład, aby dodać nagłówek authorizationdla YourControllermetod:

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