Microsoft Authentication: How to refresh access token using ajax post? - ajax

Question

I've been going through the app authorization steps here https://developer.microsoft.com/en-us/graph/docs/authorization/app_authorization, but can't seem to get the request to work. I consistently get errors saying
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access."
This seems weird as I am including that header.
$.ajax({
type: "POST",
url: url,
crossDomain: true,
data: {
'refreshToken': refreshToken,
'client_id': clientId,
'client_secret': clientSecret,
'redirect_uri': redirect_uri,
'resource': resource
},
dataType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader('Access-Control-Allow-Origin', "*");
xhr.setRequestHeader('Access-Control-Allow-Methods', "*");
xhr.setRequestHeader('Access-Control-Allow-Headers', "*");
},
success: function (data, status, headers, config) {
callback(data);
},
error: function (data, status, headers, config) {
console.log('Error getting access token from Microsoft Graph: ' + status + " " + JSON.stringify(data));
}
});

Answer 1

You are using a wrong OAuth2 flow. You should not use the Authorization grand code flow in browser applications, because you cannot keep the client secret safe and the tokens get to the server when a browser requests the redirect URL (the tokens are not in the hash # part of the URL).
That's why Microsoft API doesn't support XHR access to the /token endpoint (by omitting the CORS response headers).
You could consider using the Implicit flow, which is designed for usage in browsers, keeps the tokens safe and doesn't require a client secret.