Angular 17 on debug mode CORS issue when user is not unauthorized

Question

I have an Angular 17 app and an ASP.NET Core 8 Web API. I debug Angular in Visual Studio Code. When I run it locally with ng s -o and I login to the system, and navigate to a page where the logged in user does not have permission to view, and expect the Access Denied error. The server responds with 401 (I know it has to be 403).

Sample repo at here

Once the server returns the 401 the chrome console throws the

Access to XMLHttpRequest at 'https://localhost:xxxxx/api/security/users?pageSize=10&pageNumber=1&searchQuery=' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. and then the unauthorized msg is logged to the console, like below

but, when the logged user has permission, then there is no issue. all works as expected.

Then I built the app in production mode and ran it locally putting the production files of angular in the wwwroot folder of the ASP.NET Core 8 Web API app and it works fine and I get the expected error msg. I have also checked the preflight request and all scenarios pass the preflight request. This issue on debug mode running on VS code is very weird in Angular 17.

I tested the permission issue on API with swagger and its working as expected too. Can anybody help, this seems with debug mode in Angular 17

Answer 1

UPDATE

It caused by middleware order and mssing app.UseRouting();.

If using below code, the error is same. Not port 4200 are cors and 401, another is 403.

Excepted behavior

var app = builder.Build();

{
    app.UseExceptionHandler(_ => { });

    // Configure the HTTP request pipeline.
    if (app.Environment.IsDevelopment()) { }

    else
    {
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    

    app.UseSwagger();
    app.UseSwaggerUI(c =>
    {
        if (app.Environment.IsDevelopment())
        {
            c.EnablePersistAuthorization();
        }
        else
        {
            c.SupportedSubmitMethods(new SubmitMethod[] { });
        }

        c.SwaggerEndpoint("/swagger/v1/swagger.json", "v1");
        c.DocExpansion(Swashbuckle.AspNetCore.SwaggerUI.DocExpansion.None);

    });

    app.UseHttpsRedirection();

    app.UseDefaultFiles();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseCors();

    app.UseAuthorization();

    // app.UseOutputCache();

    app.MapControllers();//.RequireAuthorization();
    app.MapHub<NotificationHub>("/notify");//.RequireAuthorization();

    app.MapFallbackToFile("/index.html");

}

app.Run();

---

Find the ServiceTypesController.cs file and comment this line [Authorize(Roles ="NoEntry")]. Like below:

[HttpGet]
//[Authorize(Roles ="NoEntry")]
[Authorize(policy: ApplicationAuthPolicy.Settings.Services.View)]
[ProducesResponseType(typeof(ResponseResult<IReadOnlyList<ServiceTypeDto>>), StatusCodes.Status200OK)]
public async Task<ActionResult> GetServiceTypes([FromQuery] Paginator paginator, [FromQuery] ServiceTypeFilter filter, CancellationToken token)
{
    var response = await _serviceTypeService.GetServiceTypes(paginator, filter, token);

    return response.Success ? Ok(response) : UnsuccessfulResponse(response);
}