Проблема CORS между Angular 9 и WebAPI ASP. NET CORE 2.2 - PullRequest
0 голосов
/ 10 апреля 2020

Я хочу отправить запрос HTTP из моего фронт-приложения в мой веб-API. Но у меня есть ошибка CORS -> Причина: отсутствует заголовок CORS «Access-Control-Allow-Origin»

Я не понимаю, потому что я настроил свой веб-API:

Web API

startup.cs

public void ConfigureServices (IServiceCollection services) {
    services.AddCors ();
    services.AddMvc ().SetCompatibilityVersion (CompatibilityVersion.Version_2_2);
}
public void Configure (IApplicationBuilder app, Microsoft.AspNetCore.Hosting.IHostingEnvironment env) {
    app.UseCors (x => x.AllowAnyOrigin ()
        .AllowAnyMethod ()
        .AllowAnyHeader ()
        .AllowCredentials ());
    app.UseMvc ();
}

Фронт

oneService.ts

headers = new HttpHeaders()
    .set("Content-Type", "application/json")
    .set("api-key", "xapikey12346789");

getOne(): Observable<GetOne> {
    const options = { headers: this.headers };
    return this.http
    .get<GetOne>(`${data.url}/one`, options)
    .pipe(catchError(this.handleError<GetOne>()));
}

Так что я не знаю, почему это не работает ... Потому что мой API все открыто .... я думаю. Почему запрос не работает? URL для WebAPI: https://localhost: 44354 и для моего фронта http://localhost: 4200

Спасибо за вашу помощь

ОБНОВЛЕНИЕ

startup.cs

readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

public void ConfigureServices (IServiceCollection services) {
   services.AddCors(options =>
      {  
        options.AddPolicy(MyAllowSpecificOrigins,
        builder => {
          builder.AllowAnyOrigin();
        });
      });
  services.AddMvc().SetCompatibilityVersion.Version_2_2);
}
public void Configure (IApplicationBuilder app, Microsoft.AspNetCore.Hosting.IHostingEnvironment env) {
    app.UseCors(MyAllowSpecificOrigins);
    app.UseMvc ();
}
[HttpGet]
[Route("/one")]
[ProducesResponseType(StatusCodes.Status200OK)]
[EnableCors("_myAllowSpecificOrigins")]
public async Task<ActionResult<GetOne>> GetOne() => await _service.GetOne();

Я пытался с документами Microsoft, но снова не работает ...

Журнал ошибок

Запрос перекрестного источника заблокирован: та же политика происхождения запрещает чтение удаленного ресурса в https://localhost: 44354 / one . (Причина: запрос CORS не выполнен)

В моем браузере firefox произошла ошибка.

Запрос заголовков в моем браузере Firefox, у меня есть:

Запрос

Host: localhost:44354
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:75.0) Gecko/20100101 Firefox/75.0
Accept: */*
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: GET
Access-Control-Request-Headers: api-key,content-type
Referer: http://localhost:4200/app/
Origin: http://localhost:4200
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

Я вижу метод запросов и заголовки

Обновление 2

Я пытался

  services.AddCors(options =>
    {
      options.AddPolicy(MyAllowSpecificOrigins,
        builder => {
          builder.AllowAnyOrigin()
            .AllowAnyHeader()
            .AllowAnyMethod();
          });
   });

Но та же ошибка ....

РЕШЕНИЕ

Я изменяю порядок промежуточного программного обеспечения вызова в методе Configure

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseHsts();
    }
    app.UseCors(MyAllowSpecificOrigins);
    app.UseSwagger();
    app.UseMiddleware();
    app.UseOtherMiddleware();
    app.UseMVC();

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

Я думаю, что упростить дескриптор CORS в API, удалить атрибуты и т. Д. c .... Но это решение работает

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