Azure AD Preflight request not returning data

Question

Im currently trying to send a post request to https://login.microsoftonline.com/XXX/oauth2/token endpoint to retrieve an access token and refresh token for an application. When sending the post request to the endpoint using axios, the preflight is sent off, however no response is returned.

The Error:

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:3000' is therefore not allowed access.

However using a different approach to the axios post request, it returns the data but has no preflight and gives the a different error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access.

Both Axios Requests:

const data = new FormData();

 data.append('grant_type', this.config.grant_type); 
 data.append('client_id', this.config.client_id);
 data.append('code', localStorage.getItem('auth_code'));
 data.append('redirect_uri', this.config.redirect_uri);
 data.append('client_secret', this.config.client_secret);
 data.append('resource', this.config.client_id);

axios.post(`https://login.microsoftonline.com/${this.config.tenant}/oauth2/token`, data);

Method 2:

  axios({
  method: 'post',
  contentType: 'application/json',
  url: `https://login.microsoftonline.com/${this.config.tenant}/oauth2/token`,
  data: {
    grant_type: this.config.grant_type,
    client_id: this.config.client_id,
    code: localStorage.getItem('auth_code'),
    redirect_uri: this.config.redirect_uri,
    client_secret: this.config.client_secret,
    resource: this.config.client_id
  }
});

Is this a problem with the axios request itself or with the endpoint?

Answer 1

You should use the Implicit Grant flow to get the access token. You cannot use a flow where you include a client secret from front-end JavaScript!

Your client secret (AKA your app's password) is currently public to anyone who visits your site!

You cannot use a client secret in front-end JavaScript.

You will need to enable implicit flow in the app's manifest, and then in your app make a redirect to Azure AD with a URL like this:

https://login.microsoftonline.com/tenant-id-here/oauth2/authorize?client_id=your-client-id&response_type=id_token+token&resource=resource-id-for-api&redirect_uri=your-app-redirect-url

Documentation: https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-authentication-scenarios#single-page-application-spa