Cross-origin token redemption is permitted only for the 'Single-Page Application' In angular . While genrating token for using graph api in my single page application

Question

getToken(){  
    var httpHeader = new HttpHeaders({  
      "Content-Type": "application/x-www-form-urlencoded",  
      // "Access-Control-Allow-Origin": "*",  
    })  
    //   
    const body = new URLSearchParams();  
    body.set('grant_type','client_credentials' )  
    body.set('client_id', environment.Ad_directory.clientId)  
    body.set('client_secret', environment.Ad_directory.clientSecret)  
    body.set('resource', environment.Ad_directory.resource);  
         const headers = new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' });  
   
       console.log(body.toString())  
      return  this.http.post("https://login.microsoftonline.com/"+environment.Ad_directory.tenantId +"/oauth2/token",body.toString(), { headers, observe: 'response' })  
  
  }  
  
}  
  

Answer 1

The error you get is because the request has an Origin header suggesting a Public client while AAD expects something else. This is because you are using the Client Credentials Flow which is meant for serve side confidential client applications on a Single Page Application which is a public client.

You should not be using client credentials flow on SPA because there is no way to secure the client secret. In your case you should be using authorization code flow which is meant for SPAs. If you have to use Client Credential flow, you should move the communication with Graph to serve side.