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 souhaite avoir accès à tous les champs de l'en-tête de la réponse. Dans mon navigateur, je peux inspecter l'en-tête et je peux voir que tous les champs dont j'ai besoin sont présents (tels que token, uid, etc ...), mais quand j'appelle

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

Je reçois 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 voir, tous les autres champs sont présents.

Bests.

En cas de requêtes CORS, les navigateurs ne peuvent accéder par défaut qu'aux en-têtes de réponse suivants:

• Contrôle du cache
• Contenu-Langue
• Type de contenu
• Expire
• Dernière modification
• Pragma

Si vous souhaitez que votre application cliente 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

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

Pour ceux d'entre vous qui utilisent nodejs avec des cors :

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

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

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

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

J'étais confronté au même problème. Vous avez fait cela 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.

Face au même problème dans le noyau asp.net J'espère 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")
                );
        });
    }
}

Selon la documentation officielle :

Cela peut aider si vous voulez les en-têtes HTTP avec lesquels le serveur a répondu . Tous les noms d'en-tête sont en minuscules et sont accessibles en utilisant la notation entre crochets. Exemple: response.headers['content-type']donnera quelque chose comme: headers: {},

Pour le SpringBoot2, ajoutez simplement

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

à votre code d'implémentation de filtre CORS pour avoir mis en liste blanche custom-header1, custom-header2etc.

pour l'aide de django

CORS_EXPOSE_HEADERS = [
        'your header'
    ]

Pour Spring Boot 2, si vous ne souhaitez pas utiliser la configuration CORS globale, vous pouvez le faire par méthode ou par niveau de classe / contrôleur en utilisant une @CrossOriginannotation avec exposedHeadersatribute.

Par exemple, pour ajouter un en-tête authorizationpour les YourControllerméthodes:

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