Post Method не работает Angular 7 и ASP.NET Core 2.1

Question

Я пытаюсь отправить запрос из Angular 7 в REST API в .NET Core 2.1. Мой перехватчик:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

@Injectable()
export class HttpConfigInterceptor implements HttpInterceptor {
    constructor() { }
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        request = request.clone({
            withCredentials: true,
          });
        return next.handle(request).pipe(
            map((event: HttpEvent<any>) => {

                if (event instanceof HttpResponse) 
                {
                    localStorage.setItem('status','200');
                }
                return event;
            }),
            catchError((error: HttpErrorResponse) => {
                let data = {};
                data = {
                    reason: error && error.error && error.error.message ? error.error.message : '',
                    //status: error.status
                };
                if (data['reason'].length>0){
                alert("Error:"+ data['reason']);
                }
                else{
                    alert("Error :"+ error.message);
                }
                return throwError(error);
            }));
    }
}

Мои методы StartUp.cs ConfigurationService и Configure следующие:

public void ConfigureServices(IServiceCollection services)
        {
            services.AddOptions();
            services.AddAuthentication(IISDefaults.AuthenticationScheme);
            //Get the configuration settings
            services.Configure<AppSettings>(Configuration.GetSection("URLSettings"));
            String[] origins = Configuration.GetSection("AllowedURLs").Get<AppSettings>().origins;

            //Add the services
            services.AddTransient<IClaimsTransformation, ClaimsTransformationService>();
            //Add Cors
            //services.AddCors();
            services.AddCors(options =>
            {
                options.AddPolicy("CorsPolicy",
                                    builder => builder
                                    .AllowAnyHeader()
                                    .AllowAnyMethod()
                                    .WithOrigins(origins)
                                    .AllowCredentials()
                                 );
            });

            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseHsts();
            }

            app.UseCors("CorsPolicy");
            //app.UseAuthentication();
            //app.UseHttpsRedirection();
            app.UseMvc();
        }

Мой метод POST в Angular:

public GenerateCarModels(carIds: number[]) :any {
    const body = carIds;
    let httpOptions= { headers: new HttpHeaders({ 'Content-Type': 'application/json'})};
    const url = `${baseURL}${'/api/GenerateModels/GenerateCarModels'}`;
    return this.http.post(url,body,httpOptions);
  }

Метод GET работает, не находит проблем с перехватчиком или API, но когда я пытаюсь POST получить значения, я получаю

Access to XMLHttpRequest at 'http://localhost:53499//api/reports/GenerateCarModels' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Failed to load resource: the server responded with a status of 401 (Unauthorized)

Я не уверен, что я делаю здесь неправильно

Мои зависимости ...

"dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
....
....
....
}

Не могли бы вы помочь указать, что мне не хватает в заголовках или что-то еще? Я разрешил localhost: 4200 в источнике, и, как я уже сказал, другие методы GET работают нормально. Спасибо

РЕДАКТИРОВАТЬ: Когда я запускаю Fiddler в фоновом режиме сбора данных, он работает.

Answer 1

Убедитесь, что в вашей конфигурации cors используется что-то вроде options.WithOrigins("http://localhost:4200") вместо options.WithOrigins("http://localhost:4200/"), удалите "/" в конце URL, если у вас есть.

Затем попробуйте интегрировать ваше решение с этой ссылкой навключить заголовок OPTIONS для CORS в .NET Core Web API

https://stackoverflow.com/a/42199758/10158551

Answer 2

Попробуйте, чтобы увидеть, работает ли он

public void ConfigureServices(IServiceCollection services)
{
      services.AddCors();
      services.AddMvc();
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    app.UseCors(
        options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()
    );

    app.UseMvc();
}

Помните, что порядок промежуточного программного обеспечения имеет значение

Answer 3

Это в основном проблема перекрестного происхождения (COR). Пожалуйста, проверьте эту ссылку для получения дополнительной информации о Cors =>

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

На данный момент, пожалуйста, проверьте свои заголовки. Они должны быть такими же, как определено в вашем бэкэнде

Answer 4

Вы пробовали вот так

changepassword(loginData: any): Observable<any> {
return this.http.post<any>('Usermaster/ChangePassword', loginData).pipe(
  tap(
    function (data) {
      return data;
    }
  )
);

}

Это образец, который я использую