Angular 19 and .NET Core 9 -- Multiple requests to backend

I have been search and trying things for 2 days now, I must give up and submit to help!

I am relatively new to web development. My background is data analytics, so I am not unfamiliar with software development, however I am left scratching my head.

I have an Angular 19 frontend and a .NET Core 9 Web API backend. I am thinking my issue is with CORS but possibly Angular sending multiple requests.

My problem is that I am seeing multiple POST requests to the same endpoint each time the page is rendered. This normally wouldn't be an issue since I am just learning, however the problem is that I am trying to exchange an auth_token for an api_token so that I can use another API and consume data. This is problem because two requests are being made to the endpoint the auth_token has already been used and cannot be exchanged for an api_token on the second request. The POST request has a JSON body therefore it is subject to preflight cors OPTIONS requests.

My logs indicate the .NET Core's cors middleware is responding properly to the cors request as seen by this line: CORS policy execution successful.

Additionally, you can see the two posts requests happening as indicated by this line: Request finished HTTP/1.1 POST http://localhost:5281/api/accountconnect - 200 - application/json

Finally, each time the post method in the endpoint fires, I have a Console.Out.Writeline that produces this in the logs: Responded to request for account connection

in the logs:

info: Microsoft.Hosting.Lifetime[14]
Now listening on: http://localhost:5281
info: Microsoft.Hosting.Lifetime[0]
Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
Content root path: C:\Users\brown\Documents\MailRail\backend-webapi
info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
Request starting HTTP/1.1 POST http://localhost:5281/api/accountconnect - application/json 111
warn: Microsoft.AspNetCore.HttpsPolicy.HttpsRedirectionMiddleware[3]
Failed to determine the https port for redirect.
info: Microsoft.AspNetCore.Routing.EndpointMiddleware[0]
Executing endpoint 'backend_webapi.Controllers.AccountConnectController.Post (backend-webapi)'
info: Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker[102]
Route matched with {action = "Post", controller = "AccountConnect"}. Executing controller action with signature System.Threading.Tasks.Task`1[Microsoft.AspNetCore.Mvc.ActionResult`1[backend_webapi.Models.AccountCredentials]] Post(backend_webapi.Models.AccountCredentials) on controller backend_webapi.Controllers.AccountConnectController (backend-webapi).
Responded to request for account connection
info: Microsoft.AspNetCore.Mvc.Infrastructure.ObjectResultExecutor[1]
Executing OkObjectResult, writing value of type 'backend_webapi.Models.AccountCredentials'.
info: Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker[105]
Executed action backend_webapi.Controllers.AccountConnectController.Post (backend-webapi) in 47.4891ms
info: Microsoft.AspNetCore.Routing.EndpointMiddleware[1]
Executed endpoint 'backend_webapi.Controllers.AccountConnectController.Post (backend-webapi)'
info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
Request finished HTTP/1.1 POST http://localhost:5281/api/accountconnect - 200 - application/json;+charset=utf-8 127.8122ms
info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
Request starting HTTP/1.1 OPTIONS http://localhost:5281/api/accountconnect - - -
dbug: Microsoft.AspNetCore.Cors.Infrastructure.CorsService[2]
The request has an origin header: 'http://localhost:4200'.
info: Microsoft.AspNetCore.Cors.Infrastructure.CorsService[4]
CORS policy execution successful.
dbug: Microsoft.AspNetCore.Cors.Infrastructure.CorsService[1]
The request is a preflight request.
info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
Request finished HTTP/1.1 OPTIONS http://localhost:5281/api/accountconnect - 204 - - 6.9856ms
info: Microsoft.AspNetCore.Hosting.Diagnostics[1]
Request starting HTTP/1.1 POST http://localhost:5281/api/accountconnect - application/json 111
dbug: Microsoft.AspNetCore.Cors.Infrastructure.CorsService[2]
The request has an origin header: 'http://localhost:4200'.
info: Microsoft.AspNetCore.Cors.Infrastructure.CorsService[4]
CORS policy execution successful.
info: Microsoft.AspNetCore.Routing.EndpointMiddleware[0]
Executing endpoint 'backend_webapi.Controllers.AccountConnectController.Post (backend-webapi)'
info: Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker[102]
Route matched with {action = "Post", controller = "AccountConnect"}. Executing controller action with signature System.Threading.Tasks.Task`1[Microsoft.AspNetCore.Mvc.ActionResult`1[backend_webapi.Models.AccountCredentials]] Post(backend_webapi.Models.AccountCredentials) on controller backend_webapi.Controllers.AccountConnectController (backend-webapi).
Responded to request for account connection
info: Microsoft.AspNetCore.Mvc.Infrastructure.ObjectResultExecutor[1]
Executing OkObjectResult, writing value of type 'backend_webapi.Models.AccountCredentials'.
info: Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker[105]
Executed action backend_webapi.Controllers.AccountConnectController.Post (backend-webapi) in 3.7215ms
info: Microsoft.AspNetCore.Routing.EndpointMiddleware[1]
Executed endpoint 'backend_webapi.Controllers.AccountConnectController.Post (backend-webapi)'
info: Microsoft.AspNetCore.Hosting.Diagnostics[2]
Request finished HTTP/1.1 POST http://localhost:5281/api/accountconnect - 200 - application/json;+charset=utf-8 7.0639ms


Additionally, you see the OPTIONS request and two POST requests. This is from a single refresh of the page.

Here is my backend code:

AccountConnectController.cs

using Microsoft.AspNetCore.Mvc;
using System.Threading.Tasks;
using backend_webapi.Models;

namespace backend_webapi.Controllers;

[ApiController]
[Route("api/[controller]")]
public class AccountConnectController : ControllerBase
{
[HttpPost]
public async Task<ActionResult<AccountCredentials>> Post([FromBody] AccountCredentials credentials)
{

// TODO: Add your account connection logic here
Console.Out.WriteLine("Responded to request for account connection");
return Ok(credentials);
}

[HttpOptions]
public async Task<ActionResult<AccountCredentials>> Options([FromBody] AccountCredentials credentials)
{

// TODO: Add your account connection logic here
Console.Out.WriteLine("Responded to OPTIONS request");
return Ok();
}
}


Program.cs

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
// Learn more about configuring OpenAPI at https://aka.ms/aspnet/openapi
builder.Services.AddOpenApi();

builder.Services.AddCors(options =>
{
options.AddPolicy("AllowAngular",
policy =>
{
policy.WithOrigins("http://localhost:4200")
.AllowAnyHeader()
.AllowAnyMethod();
});
});

var app = builder.Build();

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

app.UseCors("AllowAngular");

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.Run();


Here is frontend code: services/local.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) {}

rootUrl = 'http://localhost:5281';

getForecast() {
console.log('Getting forecast...');
console.log('Root URL:', this.rootUrl);
console.log(this.http.get(this.rootUrl + '/weatherforecast'));
return this.http.get(this.rootUrl + '/weatherforecast');
}

getAuth(code: string) {
console.log('Getting auth creditentials...');
console.log('code:', code);
return this.http.post(this.rootUrl + '/api/accountconnect', {
code: code
});
}
}


app/auth-nylas/auth-nylas.component.ts

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { LoginData } from '../../inferfaces/login';
import { DataService } from '../../services/local';


@Component({
selector: 'app-auth-nylas',
imports: [],
templateUrl: './auth-nylas.component.html',
styleUrl: './auth-nylas.component.scss'
})
export class AuthNylasComponent {
userData: LoginData = { code: '' };
data: any;

constructor(private route: ActivatedRoute, private dataService: DataService) {
console.log('firing constructor...');
this.route.queryParamMap.subscribe(params => {
this.userData.code = params.get('code') || undefined;
});
}

ngOnInit() {
console.log('firing ngOnInit... Code:', this.userData.code);
if (this.userData.code) {
this.dataService.getAuth(this.userData.code).subscribe(data => {
this.data = data;
//console.log('Data:', this.data);
});
}
}
}


Any help or things to try would be much appreciated!

EDIT:

Adding a network tab from the browser screenshot:



Continue reading...