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

160

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.

wprowadź opis obrazu tutaj

Bests.

TWONEKSONE
źródło
Jeśli wydrukujesz axios.defaults.headers, czy to daje ci ten, którego brakuje? Niektóre nagłówki są skonfigurowane na tym poziomie, a nie na poziomie każdego żądania (patrz github.com/mzabriskie/axios#global-axios-defaults )
Ben Hare
2
Czy to nie jest axios.defaults.headersdo skonfigurowania parametrów nagłówka REQUEST? Muszę uzyskać dostęp do odpowiedzi na odpowiedź. @BenHare
TWONEKSONE
A tak przy okazji, to, co nazywasz prośbą, nie jest prośbą. To obietnica za twoją odpowiedź. Twoje żądanie było tym, co przekazałeś do metody post () jako argumenty.
Daniel

Odpowiedzi:

311

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
Nick Uraltsev
źródło
Moja wina, że ​​zapomniałem odsłonić te pola.
TWONEKSONE
27
Jeśli używasz Railsów z Rack-Cors, musisz ustawić expose: ['Access-Token', 'Uid']na początku:resource '*', :headers => :any, :methods => [:get, :post, :put, :patch, :delete, :options, :head], expose: ['Access-Token', 'Uid']
CWitty
3
Nie rozumiem. Jeśli nie są widoczne, dlaczego dodatkowe nagłówki są widoczne w przeglądarce, ale nie w odpowiedzi axios?
adanilev
4
@adanilev, przeglądarki umożliwiają wyświetlanie ich do celów debugowania, ale uniemożliwiają dostęp do nich za pośrednictwem interfejsów API ze względów bezpieczeństwa. Uniemożliwia klientom uzyskanie zabezpieczonych danych uwierzytelniających z serwerów, umożliwiając serwerowi określenie, jaki dostęp ma klient. TLDR: zrobiono to celowo ze względów bezpieczeństwa
erfling
2
Mam to w moim pliku konfiguracyjnym NGINX ... 'Access-Control-Expose-Headers' 'Authorization, X-Suggested-Filename, content-disposition' always; Nadal widzę tylko, że content-type: "application/pdf" naprawdę trzeba wyciągnąćcontent-disposition
Old Man Walter
17

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

Cass
źródło
1
Dla tych, którzy się zastanawiają, możesz tutaj również przekazać tablicę: ujawnioneHeaders: ['Authorization', 'X-Total-Count']
Thiago Santana
11

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.

Daniel Azamar
źródło
7

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")
                );
        });
    }
}
Chitova263
źródło
1
Witamy w SO! Twoja odpowiedź może być poprawna, ale w StackOverflow odradza się udzielanie odpowiedzi tylko za pomocą kodu pocztowego. Spróbuj wyjaśnić, w jaki sposób Twoja odpowiedź rozwiązuje pierwotne pytanie. przeczytaj, jak napisać lepszą odpowiedź
nircraft
Dziękuję, pomogło;)
Florian
2

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

Yogesh Bhatt
źródło
1

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

JackTheKnife
źródło
0

o pomoc django

CORS_EXPOSE_HEADERS = [
        'your header'
    ]
VladimirDev
źródło
0

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 {
    ...
}
M. Dudek
źródło