I'm getting a CORS issue while loading my webpage with MSAL - how do I whitelist my webpage with Edge Auth?

Question

I'm using the code from this page in my own project to get access tokens: https://learn.microsoft.com/en-us/entra/identity-platform/quickstart-single-page-app-javascript-sign-in

Below, you can see the CORS errors, but I cannot find a whitelist to add my own localhost and website address to. When I run the demo app only there is no CORS issue.

Here're the errors:

1)

Origin http://localhost:5173 is not allowed by Access-Control-Allow-Origin. Status code: 200

2)
https://edge-auth.microsoft.com/js/ms_auth_client.min.js Failed to load resource: Origin http://localhost:5173 is not allowed by Access-Control-Allow-Origin. Status code: 200

Any suggestions?

Answer 1

Hello @Shawn ,

Thank you for reaching out Microsoft Q&A.

I Understand your getting a CORS issue while loading my webpage with MSAL using Origin http://localhost:5173 is not allowed by Access-Control-Allow-Origin for the SPA.

If you attempt to use the authorization code flow without setting up CORS for your redirect URI, you'll see this error not allowed by Access-Control-Allow-Origin.
If so, visit your app registration and update the redirect URI for your app to use the spa type.
Update a redirect URI: Set the redirect URI's type to spa by using the application manifest editor in the Microsoft Entra admin center.

Applications can't use a spa redirect URI with non-SPA flows, for example, native applications or client credential flows. To ensure security and best practices, the Microsoft identity platform returns an error if you attempt to use a spa redirect URI without an Origin header. Similarly, the Microsoft identity platform also prevents the use of client credentials in all flows in the presence of an Origin header, to ensure that secrets aren't used from within the browser.

Also Redirect URIs for SPAs that use the auth code flow require special configuration.
Add a redirect URI that supports auth code flow with PKCE and cross-origin resource sharing (CORS): Follow the steps in Redirect URI: MSAL.js 2.0 with auth code flow.

For additional information follow: https://learn.microsoft.com/en-us/entra/identity-platform/v2-oauth2-auth-code-flow#redirect-uris-for-single-page-apps-spas
https://learn.microsoft.com/en-us/entra/identity-platform/scenario-spa-app-registration#redirect-uri-msaljs-20-with-auth-code-flow

Hope this helps. Do let us know if you any further queries.

---

If this answers your query, do click Accept Answer and Yes for was this answer helpful. And, if you have any further query do let us know.

Regards,
Goutam Pratti.