web-dev-qa-db-fra.com

Axios accède aux champs d'en-tête de réponse

Je construis une application frontale avec React et Redux et j'utilise axios pour exécuter mes requêtes. Je voudrais avoir accès à tous les champs dans l'en-tête de la réponse. Dans mon navigateur, je peux inspecter l'en-tête et voir que tous les champs dont j'ai besoin sont présents (tels que jeton, uid, etc.), mais lorsque j'appelle

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

Je viens juste

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

Ici, l'onglet réseau de mon navigateur, comme vous pouvez le constater, contient tous les autres champs.

enter image description here

Bests.

http-headerses6-promiseaxios
102
TWONEKSONE

Dans le cas de demandes CORS, les navigateurs ne peuvent accéder aux en-têtes de réponse suivants que par défaut:

  • Cache-Control
  • Contenu-Langue
  • Type de contenu
  • Expire
  • Dernière modification
  • Pragma

Si vous souhaitez que votre application client puisse accéder à d'autres en-têtes, vous devez définir l'en-tête Access-Control-Expose-Headers sur le serveur:

Access-Control-Expose-Headers: Access-Token, Uid
204
Nick Uraltsev

Cela m'a vraiment aidé, merci Nick Uraltsev pour votre réponse.

Pour ceux qui utilisent nodejs avec cors :

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

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

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

Dans le cas où vous envoyez la réponse sous forme de res.header('Authorization', `Bearer ${token}`).send();

6
cass_

Je faisais face au même problème. Y l’a fait dans mon "WebSecurity.Java", il s’agit de la méthode setExposedHeaders dans la configuration 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;
}

J'espère que ca fonctionne.

3
Daniel Azamar

Face au même problème dans le noyau asp.net Espérons que cela aide

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

Je suis confronté au même problème. J'ai mis Access-Control-Expose-Headers: Set-Cookie et je ne peux toujours pas lire la valeur des en-têtes

0
Jack Tang