Axios отримує доступ до полів заголовка відповідей

Я будую додаток для інтерфейсів з React і Redux, і я використовую axios для виконання своїх запитів. Я хотів би отримати доступ до всіх полів у заголовку відповіді. У своєму браузері я можу оглянути заголовок, і я бачу, що всі потрібні мені поля є (наприклад, маркер, uid тощо), але коли я дзвоню

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

Я отримую просто

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

Ось моя вкладка мережі браузера, як ви можете бачити всі інші поля.

Звірі.

У випадку запитів CORS браузери можуть мати доступ до таких заголовків відповідей лише за замовчуванням:

• Кеш-контроль
• Мова вмісту
• Тип вмісту
• Закінчується
• Остання зміна
• Прагма

Якщо ви хочете, щоб ваш клієнтський додаток мав доступ до інших заголовків, вам потрібно встановити заголовок Access-Control-Expose-Headers на сервері:

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

Це мені дуже допомогло, дякую Ніку Уральцеву за вашу відповідь.

Для тих з вас , використовуючи nodejs з CORS :

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

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

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

У випадку, коли ви надсилаєте відповідь способом res.header('Authorization', `Bearer ${token}`).send();

Я зіткнувся з тією ж проблемою. Y зробив це в моєму "WebSecurity.java", мова йде про метод setExposedHeaders в конфігурації 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;
}

Сподіваюся, це спрацює.

Зіткнувся з тією ж проблемою в ядрі asp.net Сподіваюся, що це допомагає

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

Згідно з офіційними документами :

Це може допомогти, якщо ви хочете заголовки HTTP, на які відповів сервер . Усі назви заголовків мають нижній облік і можуть бути доступні за допомогою позначення дужок. Приклад: response.headers['content-type']дасть щось на зразок: headers: {},

Для SpringBoot2 просто додайте

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

до коду вашої реалізації фільтра CORS, щоб він був дозволений custom-header1та custom-header2ін

за допомогу джанго

CORS_EXPOSE_HEADERS = [
        'your header'
    ]

Для Spring Boot 2, якщо ви не хочете використовувати глобальну конфігурацію CORS, ви можете це зробити за методом або рівнем класу / контролера, використовуючи @CrossOriginрекламу з атрибутом exposedHeaders.

Наприклад, для додавання заголовка authorizationдля YourControllerметодів:

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