Post Method not working Angular 7 and asp .net core 2.1

Question

I am trying to POST a request from Angular 7 to an REST API in .NET Core 2.1 My interceptor is

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);
            }));
    }
}

My StartUp.cs's ConfigurationService and Configure methods are as follows

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();
        }

My POST method in Angular is

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);
  }

The GET Method works find and no issues with the interceptor or the APIs, but when I am trying to POST the values I get

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)

I am not sure what I am doing wrong here

My depencencies...

"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",
....
....
....
}

Can you please help point what I am missing in headers or anything? I have allowed localhost:4200 in the origin and as I said other GET methods work finely. Thank you

EDIT: When I run Fiddler in the background capturing data it works.

Answer 1

Try this to see if it work

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();
}

Remember the middleware order is matter

Answer 2

Have you tried like this

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

}

Tis is sample which i am using

Answer 3

Make sure in your cors configuration use something like options.WithOrigins("http://localhost:4200") instead of options.WithOrigins("http://localhost:4200/"), remove "/" at the end of url if you have.

Then try to integrate you solution with this link to enable OPTIONS header for CORS on .NET Core Web API

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