Microsoft Graph API : Access-Control-Allow-Origin

Question

I am trying to integrate Microsoft Graph authentication and access sharepoint and User's Graph Profile & Pic. I had followed their document https://developer.microsoft.com/en-us/graph/docs/authorization/app_authorization
I am able to achieve first step Authenticate a user and get app authorized , but not Acquire an access token. I have checked it in Postman, able to get response of access token. Same way I'm trying to do it using Jquery Ajax but getting

XMLHttpRequest cannot load https://login.microsoftonline.com/common/oauth2/token. No 'Access-Control-Allow-Origin' header is present on the requested resource.

$.ajax({ type:"POST",headers: {
    'Content-Type':'application/x-www-form-urlencoded'
},
crossOrigin: true,url: "https://login.microsoftonline.com/common/oauth2/token",data:$.param({grant_type: "authorization_code",redirect_uri:"http://localhost:92",client_id:"8c907c91-1b21-4468-825e-116a4f663249",client_secret:"xxxxxxxxx+=",code:"AQABAAIAAABnfiG-mA6NTae7CdWW7QfdkHvUMGWjMMTjOGwaac7c-pFOjLqj98r37uhB1a1XqjnCL-nK5HcvRIYLhLSUQJZeY9ybZLgWfSl4U0CNdZkwIvee_r6-hPC0Wts0ULDWzkg_nHWLHrquAjJ67T84vuIUv8525xTVdm1Ej07EPRttlske50jy1lruaLX0Wzdj72VnAQ0iRHB_VKwEA-1YB7VOt6qh9756XYkDUfzJMZTxTawT5PVQFyv2joy0TbUYljkyT8RgzdhgT6YV6Rum3cQZg3Amso-0-6umF_1ECfdjmXXxdkscAmsGJHZPrZ1HE8W9zhfsGKlc57QI8J3Qkz-Wfkw8lxcfpp84wHmKnA28jWrww7szXVjjsYmtNsRpSYIvq393QoUZnWN-t0D71510pVAYswr6R3_rR80SMrMvolIpoXeIvPDoOkLszgYEeNRkGAcjVYD5XS4aajyrWqCSUz3xzNt8Vb6x9QBCWxw9xAottQM5ZZIbWc9zrKmmPL8sqkEpJ7Z95QdJjgkFy0qT5c_GQwKNoAiF96iVhyLiULvjwlFYsV9d84QGnz_a5NIt6mMbhgJoY32snEJN7kMyK9uzTHdglkkl-9UgJNnpArN5D8hywaERMN4Fy7RZxnqx9Mt4UnnfK9-RnjvaIE6TIAA",resource:"https://graph.microsoft.com/"}), success: function(result){
    $("#div1").html(result);
},
error: function(){

    $("#div1").html("Error");
}});

But in Console, I can see the response form the post method, because for 'Acces-origin' issue, I couldn't get response in my Ajax Success part.

Answer 1

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy.So the browser is blocking it as it usually allows a request in the same origin for security reasons. Postman wil work because they are not restricted by this policy .

To integrate AAD in javascript, we suggest you to use azure-activedirectory-library-for-js which is a library in javascript for frontend to integrate AAD with a ease ,by using implicit grant flow ,It also has the advantage of eliminating any requirements for cross origin calls, which are necessary if the JavaScript application is required to contact the token endpoint. Here is a thread which discuss same topic and show more about how to use ADAL.JS , please refer to that .