Axios erhalten Zugriff auf Antwortheaderfelder

Ich erstelle eine Frontend-App mit React und Redux und verwende Axios , um meine Anforderungen auszuführen. Ich möchte Zugriff auf alle Felder in der Kopfzeile der Antwort erhalten. In meinem Browser kann ich den Header überprüfen und sehen, dass alle Felder vorhanden sind, die ich benötige (wie Token, UID usw.), aber wenn ich anrufe

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

Ich verstehe nur

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

Hier ist mein Browser-Netzwerk-Tab, wie Sie sehen können, alle anderen Felder vorhanden.

Beste.

Bei CORS-Anforderungen können Browser standardmäßig nur auf die folgenden Antwortheader zugreifen:

• Cache-Kontrolle
• Inhaltssprache
• Inhaltstyp
• Läuft ab
• Zuletzt geändert
• Pragma

Wenn Sie möchten, dass Ihre Client-App auf andere Header zugreifen kann, müssen Sie den Header Access-Control-Expose- Headers auf dem Server festlegen :

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

Das hat mir wirklich geholfen, danke Nick Uraltsev für deine Antwort.

Für diejenigen unter Ihnen, die nodejs mit cors verwenden :

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

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

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

In dem Fall, dass Sie die Antwort in der Art von senden res.header('Authorization', `Bearer ${token}`).send();

Ich hatte das gleiche Problem. Y hat dies in meiner "WebSecurity.java" getan, es geht um die setExposedHeaders-Methode in der cors-Konfiguration.

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

Ich hoffe, es funktioniert.

Konfrontiert das gleiche Problem in asp.net Kern Hoffe, das hilft

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

Laut offiziellen Dokumenten :

Dies kann hilfreich sein, wenn Sie die HTTP-Header verwenden möchten , mit denen der Server geantwortet hat . Alle Headernamen sind in Kleinbuchstaben geschrieben und können über die Klammernotation aufgerufen werden. Beispiel: response.headers['content-type']gibt so etwas wie: headers: {},

Für den SpringBoot2 einfach hinzufügen

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

zu Ihrem CORS-Filter-Implementierungscode, um eine Whitelist zu haben custom-header1und custom-header2etc.

für Django Hilfe

CORS_EXPOSE_HEADERS = [
        'your header'
    ]