Angular 7 to dotnetcore 2.1 web api call gives no response

Question

below is the code from login.component.ts,

login() {
const val = this.form.value;

if (val.email && val.password) {
  this.authService.login(val.email, val.password)
    .subscribe(
      data => {

        if (data && data.Token) {
          // store user details and jwt token in local storage to keep user logged in 
          //between page refreshes
          localStorage.setItem('currentUser', JSON.stringify(data));
          console.log("user logged in");
          this.router.navigate([this.returnUrl]);
        } else {
          console.log("user not logged in");
        }

      },
      error => {
        this.error = error;
      });
 }
}

below is the code from angular service,

login(email: string, password: string) {
 return this.http.post<User>(this.baseUrl + "Authenticate", { email, 
password }, httpOptions);
}

below is the code for dotnetcore 2.1 web api action,

using System;
using System.IdentityModel.Tokens.Jwt;
using System.Linq;
using System.Security.Claims;
using System.Text;
using API.Utilities;
using Business.Models;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;
using Microsoft.IdentityModel.Tokens;


namespace API.Controllers
{
  [Authorize]
  [Produces("application/json")]
  [Route("api/[controller]")]
  public class UsersController : BaseController
{
    private readonly AppSettings _appSettings;

    public UsersController(IOptions<AppSettings> appSettings)
    {          
        _appSettings = appSettings.Value;
    }

    [AllowAnonymous]
    [HttpPost]
    [Route("Authenticate")]
    public IActionResult Authenticate([FromBody]User userParam)
    {
        var user = Authenticate(userParam.Email, userParam.Password);

        if (user == null)
            return BadRequest(new { message = "Username or password is incorrect" });

        return Ok(user);
    }



    public User Authenticate(string username, string password)
    {
        //////code goes

        return user;
    }


}
} 

}

In fiddler always I can see my post request with length as -1. Not sure what is the problem any help?

Below are from the startup.cs. Is there any flaw in my CORS Settings for dotnetcore2.1 WEB API solution

  public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1).
            AddJsonOptions(options => {
            options.SerializerSettings.ContractResolver = new DefaultContractResolver();
        });

        services.AddDistributedMemoryCache();

        services.AddSession(options => {
            // Set a short timeout for easy testing.
            options.IdleTimeout = TimeSpan.FromSeconds(36000);
            options.Cookie.HttpOnly = true;
        });

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

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseHsts();
        }

        app.UseStaticFiles();

        app.UseCors(x => x
        .AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader()
        .AllowCredentials());
        app.UseSession();
        app.UseHttpsRedirection();
        app.UseAuthentication();
        app.UseMvc();

    }

Answer 1

You should take into consideration that your WEB API service is accesed from a different port than the one from your Angular UI. What hosts your UI in development mode is Angular Cli. This means is that enabling CORS for your WEB API doesn't necessarily enable them for Angular's UI.

By the looks of the image you posted, your Web API's URL would be http://localhost:44389 but the referer is http://localhost:4200.

One way to get around this at a development stage, is by adding to your ClientApp root folder a proxyconfig.json file with a similar configuration to:

{
  "/api/*": {
  "target": "https://localhost:44389",
  "secure": true,
  "changeOrigin": true
  }
}

This way the browser interprets that requests from your Angular UI to your WEB API are from the same origin.

If your WEB API and Angular UI are to be hosted in the same server in production mode I would recommend avoiding CORS. Here's a good article about the subject: https://medium.freecodecamp.org/the-best-ways-to-connect-to-the-server-using-angular-cli-b0c6b699716c

Note: you may need to serve the proxyconfig.json file, here's how: https://www.codeproject.com/Tips/1259121/%2FTips%2F1259121%2FAngular-Proxy-Configuration-for-API-Calls