Отсутствуют заголовки в ответ на запрос CORS с Angular и Web API 2

В настоящее время я пишу угловое приложение, которое сообщается с серверной частью, разработанной с помощью Web API 2.

Иногда я хочу добавить определенный заголовок в ответ на запрос. Я включил CORS.

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

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

Есть идеи, что я делаю неправильно? Есть ли что-то особенное в части Angular?

В целях тестирования я просто делаю это в веб-API:

public static void Register(HttpConfiguration config)
{
        var cors = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(cors);
     .....
    // rest of the implementation (Routes, etc...)
    }

ОБНОВЛЕНИЕ

Я написал ICorsPolicyProvider :

public class IkCorsPolicyProvider : ICorsPolicyProvider
{
    private CorsPolicy CreateCorsPolicy()
    {         
       CorsPolicy policy = new CorsPolicy     
       {        
          AllowAnyMethod = true,
          AllowAnyHeader = false,
          AllowAnyOrigin = false
       };

       // Some code to get the client allowed origins
       //.....
       //

       // set the allowed origins to the policy
       foreach (string allowedOrigin in allowedOrigins)
       {
          policy.Origins.Add(allowedOrigin);
       }

       policy.Headers.Add("content-type");
       policy.Headers.Add(UserContext.Key);
       policy.ExposedHeaders.Add("content-type");
       policy.ExposedHeaders.Add(UserContext.Key);

       return policy;           
    }

   public Task<CorsPolicy> GetCorsPolicyAsync(HttpRequestMessage request, CancellationToken cancellationToken)
    {
       CorsPolicy policy = CreateCorsPolicy();
       return Task.FromResult(policy);
    }
}

Затем в Регистре:

public static void Register(HttpConfiguration config)
{
    config.EnableCors(new IkCorsPolicyProvider());
     .....
    // rest of the implementation (Routes, etc...)
 }

person Stunt    schedule 14.02.2018    source источник


Ответы (2)


Вы действительно попали в точку. Когда вы запрашиваете сервер из другого источника, навигатор (Chrome) сделает запрос с помощью метода OPTIONS (это спросит у сервера, какие методы выставлены).

Например, представьте, что ваш внешний интерфейс находится на 'http://104.131.62.190', а ваш бэкенд на 'http://104.131.62.195'. Что ж, если вы запросите конечную точку с помощью метода POST, Chrome отправит на сервер метод OPTIONS (без заголовков) с вопросом, разрешает ли ваш бэкэнд метод POST. Если это позволяет, сервер отправит 200, и Chrome отправит ваш запрос POST (с заголовками), и вы получите ответ.

Если ответ вашего метода параметров с кодом 401 означает, что ваш CORS не включен должным образом. Иногда Chrome прерывает запрос на настройку времени. На данный момент во внешнем интерфейсе делать нечего, ваше решение находится на стороне вашего внутреннего сервера.

person Daniel Delgado    schedule 14.02.2018
comment
Спасибо за ответ. На стороне сервера все в порядке, потому что у меня есть успешный обратный вызов на стороне клиента с полным телом. Есть только некоторые недостающие заголовки (мои конкретные добавленные заголовки). - person Stunt; 16.02.2018

На своем сервере убедитесь, что вы добавили Access-Control-Expose-Headers : [HeaderName] для заголовков, к которым вы хотите получить доступ в angular.

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

Access-Control-Expose-Headers: Authorization

И обязательно укажите «наблюдать»: «ответ» в параметрах HTTP-вызова angular.

https://angular.io/guide/http#reading-the-full-response

person David    schedule 14.02.2018
comment
Я обновлю свой пост, потому что я написал iCorsPolicyProvider, который устанавливает правильные заголовки. Но это не работает... - person Stunt; 16.02.2018