Angular 6 - Ответ на предварительный запрос не проходит проверку контроля доступа: нет заголовка «Access-Control-Allow-Origin»

Question

Я получаю сообщение об ошибке CORS при вызове POST или DELETE Core API из моего приложения Angular.

Мой Core Web API настроен для аутентификации Windows. И атрибут [Authorize] находится на уровне контроллера. Всякий раз, когда я передаю запрос GET от Angular, запрос авторизуется, и я получаю ответ обратно.

При отправке запроса POST из Angular в Core API,

1) Если я передаю данные в виде FormData из службы Angular в Core API, все работает нормально.

2) Если я передаю данные как модель из сервиса Angular в Core API, я получаю следующую ошибку

Не удалось загрузить http://localhost:63854/api/sampleController/1: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Origin 'http://localhost:52871' поэтому не разрешен доступ

Вот Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options => options.AddPolicy("AllowAll",
        builder => builder.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials()));

    services.AddMvc();
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseCors("AllowAll");

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseMvc();
    app.UseSwagger();
    app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "APIs"));
    app.UseMvcWithDefaultRoute();
}

Основной метод действия API:

[Authorize]
[Produces("application/json")]
[Route("api/someRoute")]

public class someController : Controller
{
    [HttpPost]
    [Route("update")]
    public async Task<HttpResponseMessage> UpdateAccessType([FromBody] TestModel modalObj)
    {
         //code..
    }

    [HttpDelete("{id}")]
    public async Task<HttpResponseMessage> DeleteAccessType(string id)
    {
        //code..
    }
}

Служба Angular: accessType создается в компоненте и передается как объект службе Angular.

updateAccessType(accessType) {
    return this.http.post(this.apiUrl + "api/someController/update", accessType);
}

deleteAccessType(accessLookupId: string) {
    return this.http.delete(this.apiUrl + "api/someController/" + accessLookupId);
}

Полное сообщение об ошибке (но это происходит только при передаче данных как модальных, а не при передаче данных как FormData) - и запросы DELETE, и POST дают одно и то же исключение.

Ошибка HTTP 401.2 - Неавторизовано - Вы не авторизованы для просмотра этой страницы из-за неправильных заголовков аутентификации

Мне нравится передавать модель из Angular в Core API вместо FormData.

Answer 1

Если вы хотите использовать Cors, в сочетании с аутентификацией Windows, вы должны также включить «анонимную аутентификацию». Перепробовал все другие решения, но безуспешно.

В Angular мне пришлось реализовать HttpInterceptor, чтобы заставить его работать.

import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable()
export class WithCredentialsInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    request = request.clone({
      withCredentials: true
    });

    return next.handle(request);
  }

Answer 2

Попробуйте использовать метод Configure ниже:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseCors(builder => builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());
}