Access to XMLHttpRequest at 'https://login.microsoftonline.com/common/oauth2/v2.0/token' from origin 'mtApp' has been blocked by CORS policy.

Question

I am building a jQuery based web page.
One of our features is to access OneDrive, so we are implementing the login logic through MSAL.
However, both localhost and the test server were CORS blocked.
My settings are:

   var defaults = {  
         client_id: client-id,  
         redirect_uri: redirect,  
         client_secret: secret-key,  
         code : secret_code,  
         grant_type:'authorization_code',  
         scope:'User.Read openid profile offline_access'  
         };  
     
    $.ajax({  
         type: 'POST',  
         contentType: 'application/x-www-form-urlencoded; charset=UTF-8',  
         url: url,  
         data:qStr,  
         success: function(response, textStatus, request) {  
           console.log(response);  
         },  
         error: function(response, textStatus, request) {  
           console.log(response);  
         },  
         timeout: 240000  
       });  

The code and redirect _uri shown are exactly the same as set up in Microsoft Azure.

What I'm trying to do is log in and get a token.

Basically, we didn't configure it as a SPA like React, so we didn't configure it as an SPA on our authentication platform (Microsoft Azure).

Answer 1

Hello @정수 김 ,

As per https://learn.microsoft.com/en-in/azure/active-directory/develop/v2-oauth2-auth-code-flow#redirect-uris-for-single-page-apps-spas If you attempt to use the authorization code flow without setting up CORS for your redirect URI, you will see this error in the console:

The latest version of MSAL.js uses the authorization code flow with PKCE and CORS in response to browser third party cookie restrictions.

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.

Kindly follow these steps given in to add a redirect URI for an app that uses MSAL.js 2.0 or later

Thanks,
Akshay Kaushik

Please "Accept the answer", "Upvote" and rate your experience if the suggestion works as per your business need. This will help us and others in the community as well.