ms-identity-javascript-angular-spa-aspnetcore-webapi | Angular single-page application | Azure library

I'm currently working on Azure AD authenticaton integration to Angular - .Net core 3.1 project. This is a project which was generated from Visual Studio 2019 template (ASP.NET Core Web App).
In Azure portal, I registered 2 application and configured by MS tutorial and this.

Two registed app:

1. frontend_app (client id: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx16e3)
2. backend_api (client id: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxfcc1)

But I published only one App service, which contains both SPA and API. After login, I got a token, which append to every api call with MSAL interceptor.

The problem is all of the calls return is: 401, due to 'audience is invalid'. in the auth token the audience value the client id of frontend_app.

How can I solve to accept the the audience? Is it correct to use 2 app registration for only one app service?

I have been working through this tutorial:

https://github.com/Azure-Samples/ms-identity-javascript-angular-spa-aspnetcore-webapi

The Authentication works fine.

However, I get a CORS exception in the console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:44351/api/todolist/. (Reason: CORS request did not succeed).

In startup.cs I changed:

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

to:

builder.WithOrigins("http://localhost:4200") .AllowAnyMethod() .AllowAnyHeader() .AllowCredentials();

This had no effect.

Can anyone help me to resolve please?

Here is the startup.cs

I think my main question is which Authentication flow should I be using - On-Behalf-Of or Implicit Grant Flow? However my Authentication and Authorization set up in Startup.cs could be wrong and I am way off, so apologies if so.

I have an existing Angular SPA in Azure and a Net Framework API also running in Azure.

The web API has been ported to Net Core 3.1.

In our Azure directory, I have two registered apps. One for the API, and the other for the SPA. I have added the SPA client ID under authorized clients in the WEB API.

It is worth noting that the App services are actually running in a different directory (I think this if fine but just mentioning)

Here is the relevant Authentication/Authorization setup in Azure AD.