How does the 'ASP.NET Core with angular' template work with external requests?

Issue

I'm having a CORS issue and I'm having trouble debugging the issue. One problem I'm facing is I don't know if its a frontend or backend issue. My understanding is from boot up, the frontend will be spun up, in my case on localhost:44490. The backend will also be spun up on another localhost (localhost:7275 in my case) and you can configure proxies in the proxy.conf.js file within the frontend. So in my case hitting localhost:44490/api/task redirects to localhost:7275/api/task. That is all well and good and works as expected.

However, I'm making an external request (azure ad authentication) on the backend and receiving the CORS error message:

Access to XMLHttpRequest at 'https://login.microsoftonline.com/hiding-this-part-of-the-url' (redirected from 'https://localhost:44490/api/task') from origin 'https://localhost:44490' 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.

This to me suggest the request is actually being made by the localhost the frontend angular app is running on. This seems further backed up by the fact that my backend is set up to enable all CORS

builder.Services.AddCors(options =>

{

    options.AddPolicy("AllowAllOrigins",

    builder =>

    {

    builder.AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin();

    });

});

.....

app.UseCors("AllowAllOrigins");

So i'm just looking for details on how this actually works because I was fully under the impression that requests from my backend would be made from the localhost the backend is running on ( localhost:7275), however that doesn't seem to be the reality?

The only supporting documentation I could really find on relation to this was:

https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-net-6-preview-4/

But it didn't really solve my confusion.

Solution

From what I understand, you seems to do that:

From the angular application, you ask your api to get the azure ad login page.

Your api send [redirect to azure ad login] as response.

Your page receive the redirect response, and your browser start the redirect process:

• A preflight request is started (method OPTIONS), asking informations to azure login server.
• The response from this preflight has header with or without the key Access-Control-Allow-Origins.
• If the value contains your url, then the browser start the true request, asking for the azure login page and display it.

In other words:

The Client request your .Net Api => Your .Net api return a Redirect response => Client receive the redirect and start the redirection process.

You can see here that this is the client who handle the request, not your backend.

Answered By - Mephisto