Getting CORS on Azure AD B2C with For a talent that configured under Microsoft Entra External ID

Hello Team,

Getting CORS error when we configure Azure AD B2C in my angular app. The "Sign Up Sign In" user flow is not coming with MsalGuard.

I added Redirect URLs properly in App Registration.

Here I'm sharing my app-config and app-module, and the error screenshot.

Code of app-config

// src/app/app.config.ts

import { Configuration, InteractionType, LogLevel } from '@azure/msal-browser';
import { MsalInterceptorConfiguration, ProtectedResourceScopes } from '@azure/msal-angular';

// Replace these with your actual Azure AD B2C details
const b2cTenant = 'souravwebapp.onmicrosoft.com';
const b2cDomain = 'souravwebapp.ciamlogin.com';
const clientId = '02d5d6ed-3624-4cce-b886-0bee17e0b660';
const apiClientId = '4143217a-0a92-4eaa-baa8-0a87cc7acafb';
const signUpSignInPolicy = 'souravwebapp_signup_signin';  
const redirectUri = 'http://localhost:4200'; // or your production URL
const apiUri = 'https://localhost:44316';

export const msalConfig: Configuration = {
  auth: {
    clientId,
    authority: `https://${b2cDomain}/${b2cTenant}/${signUpSignInPolicy}`,
    knownAuthorities: [b2cDomain],
    redirectUri,
    postLogoutRedirectUri: redirectUri
  },
  cache: {
    cacheLocation: 'localStorage',
    storeAuthStateInCookie: false
  },
  system: {
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        if (!containsPii) {
          console.log(message);
        }
      },
      logLevel: LogLevel.Info
    }
  }
};

export const loginRequest = {
  scopes: ['openid', 'profile', `https://${b2cTenant}/${apiClientId}/access_as_user`]
};

export const protectedResourceMap = new Map<string, Array<string>>([
  [apiUri, [`https://${b2cTenant}/${apiClientId}/access_as_user`]]
]);

export const msalInterceptorConfig: MsalInterceptorConfiguration = {
  interactionType: InteractionType.Redirect,
  protectedResourceMap,
};