oauth2 client credentials flow Cors Issue

Question

I'm trying to implement client credentials flow using adal-node in my react app

Code I am trying

var AuthenticationContext = require('adal-node').AuthenticationContext;

const authenticate = (): any =>{   

    var authorityHostUrl = 'https://login.microsoftonline.com';
    var tenant = 'xxxx.onmicrosoft.com'; 
    var authorityUrl = authorityHostUrl + '/' + tenant;
    var applicationId = '2sdsdwewe-232jkdksdsdsadfsfdsdf'; 
    var clientSecret = 'sdfer245dwfsfw3rt345r342fwfwefwf'; 
    var resource = 'api://sdfwerwerwrwerwerwrewrwer'; 
    
    var context = new AuthenticationContext(authorityUrl);
    
    context.acquireTokenWithClientCredentials(resource, applicationId, clientSecret, (err: { stack: string; }, tokenResponse: any)=> {
      if (err) {
        console.log('well that didn\'t work: ' + err.stack);
      } else {
        console.log(tokenResponse);
      }
    });
}

I have running from my local which is http://localhost:3000/

So in Azure active directory app registration for the app, I have added http://localhost:3000/ under web Redirect URIs. Also tried adding that under SPA as well

But when I run this it comes up with CORS error

Access to fetch at 'https://login.microsoftonline.com/xxxx.onmicrosoft.com/oauth2/token?api-version=1.0' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I am missing something here

When I run Chrome as chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

this works and generate valid token

Answer 1

You can see this document to take a look at the differences between adal and msal. And if you decide to use msal.js to integrate authentication by azure ad, then you can't use client credentials flow as this flow is for Daemon application.

I can offer you a sample that used Implicit grant flow in spa with msal.js, hope it can help, and I'll continue to find out the solution on adal.

And followed your link provided in question, I downloaded this sample, and I find that after I opened the sample code in vs code and modify the configuration in 'client-credentials-sample.js' , npm module and 'node sample\client-credentials-sample.js', I can get the response successfully, so I can't reproduce your issue. I didn't add redirect url.

On the other hand, if you wanna to resolve cors issue, you should edit your api program rather than this one, the same domain with different port also leads to cross-origin. And I created a java api application, I used filter to solve cores problems. And I'm new to node so that I'm not sure if it can help to solve cors in nodejs.

@Order(Integer.MIN_VALUE)
@Component
public class CorsFilter implements Filter {
    @Override
      public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
          throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Credentials", "true");
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN,Authorization");
        if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {
          response.getWriter().println("ok");
          return;
        }
        chain.doFilter(request, response);
      }
      @Override
      public void destroy() {
      }
      @Override
      public void init(FilterConfig filterConfig) throws ServletException {
      }
}