CORS ISSUE ANGULAR & .NET Project

I’m currently working on a project that involves integrating an Angular 19 frontend with an ASP.NET Web Application (.NET Framework) API backend, and I've run into a CORS issue.

When I try to make a request from the frontend (Angular) to the backend (ASP.NET Web API), I get the following error:

"Access to XMLHttpRequest at 'https://localhost:44377/api/auth/login' 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."

Here’s a brief overview of the setup:

My Angular application runs on http://localhost:4200.

My ASP.NET Web API runs on https://localhost:44377.

What I’ve Tried So Far: Added the EnableCors attribute in the controller and enabled CORS globally in the WebApiConfig.cs file.

Installed the Microsoft.AspNet.WebApi.Cors package.

Used the EnableCors attribute with origins: "", methods: "", headers: "*".

Despite these steps, the issue persists. I’ve seen some similar cases online, but I’m still not sure what might be causing the problem. Would you be able to share any insights or suggestions that could help resolve this? this my code in c# and angular : maybe it would help you :

c# code :

[EnableCors(origins: "http://localhost:4200/login", headers: "*", methods: "*")]

public class AuthController : ApiController
{
private readonly AuthService _authService = new AuthService();


[HttpPost]
[EnableCors(origins: "*", methods: "*", headers: "*")]

[Route("api/auth/login")]

public IHttpActionResult Login([FromUri] LoginRequest request)
{
if (_authService.ValidateUser(request.username, request.password))
{
var token = _authService.GenerateToken(request.username);
return Ok(new { token });
}

return Unauthorized();
}
}

public class LoginRequest
{
public string username { get; set; }
public string password { get; set; }
}


angular ts :

import { HttpClient } from '@angular/common/http';
import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
//import { HttpClientModule } from '@angular/common/http';
@Component({
selector: 'app-login',
standalone: true, // Indique que c'est un composant autonome
imports: [FormsModule],
templateUrl: './login.component.html',
styleUrl: './login.component.css'
})
export class LoginComponent {
//loginObj: Login;
loginObj : any = {
username: "",
password: "",

};
token: string | null = null;
errorMessage: string = '';
http= inject(HttpClient);

onlogin() {
debugger;

this.http.post('https://localhost:44377/api/auth/login', this.loginObj).subscribe((res: any) => {
if (res.result) {
alert("login sucess")
} else {
alert(res.message)
}
})
}
}
export class Login {
username: string;
password: string;
constructor() {
this.username = '';
this.password = '';
}
}

Continue reading...