Axios получают доступ к полям заголовка ответа

В случае запросов CORS браузеры по умолчанию могут получить доступ только к следующим заголовкам ответов:

• Кэш-контроль
• Content-Language
• Тип содержимого
• Истекает
• Последнее изменение
• Прагма

Если вы хотите, чтобы ваше клиентское приложение могло иметь доступ к другим заголовкам, вам необходимо установить 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'] даст что-то вроде: заголовки: {},

Для SpringBoot2 просто добавьте

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

в код реализации фильтра CORS, чтобы добавить custom-header1 и custom-header2 в белый список и т. д.

Есть еще один намек, которого нет в этом разговоре. для asp.net core 3.1 сначала добавьте ключ, который вам нужно поместить в заголовок, примерно так:

Response.Headers.Add("your-key-to-use-it-axios", "your-value");

где вы определяете политику cors (обычно она находится в Startup.cs), вы должны добавить этот ключ в WithExposedHeaders следующим образом.

          services.AddCors(options =>
        {
        options.AddPolicy("CorsPolicy",
            builder => builder
                .AllowAnyHeader()
                .AllowAnyMethod()
                .AllowAnyOrigin()
                .WithExposedHeaders("your-key-to-use-it-axios"));
        });
    }

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

          localStorage.setItem("your-key", response.headers["your-key-to-use-it-axios"]);

вы можете после использования его на всей клиентской стороне, получив к нему доступ следующим образом:

const jwt = localStorage.getItem("your-key")

для помощи django

CORS_EXPOSE_HEADERS = [
        'your header'
    ]

Пользовательские заголовки HTTP недоступны на стороне клиента из-за ограничений CORS. Вам нужно добавить настройку Access-Control-Expose-Headers на стороне сервера.

Что такое Access-Control-Expose-Headers?
Перейдите на https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Заголовки

По умолчанию доступны только эти заголовки HTTP:

• Кэш-контроль
• Content-Language
• Content-Length
• Тип содержимого
• Истекает
• Последнее изменение
• Прагма

Для настраиваемых заголовков HTTP вам необходимо настроить Access-Control-Expose-Headers в заголовках ответов.

Если вы используете Django на стороне сервера, вы можете использовать django-cors-headers (https://pypi.org/project/django-cors-headers/) для управления настройками CORS.

Например, с помощью django-cors-headers вы можете добавить список заголовков HTTP, которые должны отображаться в браузере с помощью CORS_ALLOW_HEADERS настройки

from corsheaders.defaults import default_headers

CORS_ALLOW_HEADERS = list(default_headers) + [
    'my-custom-header',
]

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

Например, чтобы добавить заголовок authorization для YourController методов:

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

Если вы используете Laravel 8 для внутренней стороны с правильно настроенным CORS, добавьте эту строку в config/cors.php:

'exposed_headers' => ['Authorization'],

[подробности того, что сказал @vladimir]

если вы используете Django
и _1 _ чтобы разрешить / контролировать CORS, вы должны установить следующее в вашем settings.py

CORS_EXPOSE_HEADERS = ['yourCustomHeader']