trying to call the backend api from angular frontend but can't authenticate with azure AD because of cors preflight access-control-allow-orgin issue

my system is angular client side and .net core backend. i'm trying to migrate the authentication process to azure AD to follow my corporate's SSO. after enabling Azure AD on client side using MSAL and on the backend following OIDC. from the client side i can login successfully and store the token in the local storage, even calling graph Api for some info retrieving and all of that is smooth and from client side. however I can't call my backend API from the angular client as I always get

Access to XMLHttpRequest at 'https://login.microsoftonline.com/{tenantID}/oauth2/v2.0/authorize?client_id=XXX' (redirected from 'https://localhost:44328/api/CutOffdate/AreRequestsAllowed') from origin 'https://localhost:44328' 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

i spent a lot of time playing with the startup.cs cors policy and enabling any origin and any header with any method of specifying the certain domain but no luck so far i'm not able to bypass that error. i made sure of the order of app.usecors and app.usemvc. i checked and tried a lot of solutions but still no luck. is it issue from Azure AD? do i need to do something relating to cors on the angular client? please note the **preflight **part.

trying to call the backend api from the angular frontend but can't authenticate with azure AD because of cors preflight access-control-allow-orgin issue

According to the error message, it seems that your app redirect to the microsoft identity login page then you got cors issue. However, when we have a client app and use it to call backend API, it shouldn't redirect to sign in page to get authentication. So I'm afraid your backend app is an MVC app or you have code like this builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme).AddMicrosoftIdentityWebApp(builder.Configuration) to integrate Azure AD. Pls note this is AddMicrosoftIdentityWebApp which is different from AddMicrosoftIdentityWebApi. You can have a look at this 2 documents. For Azure AD web app. And for Azure AD web api.

If what you have for the backend service is an asp.net core web api, then you can just follow the tutorial which the second link I shared belongs to to register azure ad app, expose api and change your code.

If what you have for the backend service is an asp.net core web app, and you also want to remain the sign in process at the same time, then you have to add 2 authentication scheme like code below.

builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd"));

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
        .AddMicrosoftIdentityWebApi(builder.Configuration.GetSection("AzureAd"));

builder.Services.AddControllersWithViews().AddMicrosoftIdentityUI();

Assuming you have a controller to return View(), then use Authorize attribute like this, it will make anonymous request redirect to sign in page.

[Authorize(AuthenticationSchemes = OpenIdConnectDefaults.AuthenticationScheme)]
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

And assuming you have an api controller, you need to use attribute like this to make the request without correct access token returning 401/403 error:

[Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
    [Route("api/[controller]")]
    [ApiController]
    [RequiredScope("your_custom_api_scope_name")]
    public class DataController : ControllerBase
    {
        public string Get() {
            return "hello";
        }
    }