Getting CORS error while calling /authorize of Azure Active Directory from Angular Application

Question

I am getting CORS error when I am trying to call the below API of Azure Active Directory

https://login.microsoftonline.com/{tenantId}/oauth2/v2.0/authorize?client_id={cliendId}&scope=https://outlook.office.com/IMAP.AccessAsUser.All offline_access&redirect_uri=http://localhost&response_type=code

from my Angular application.

This same API works when I paste it in Chrome and hit the enter button, and in response I get the authorization code, but the same doesn't work for Angular. I researched the issue on Google and understood that the issue is because both the domains (client and auth server) are different. Is there a way I can solve this CORS error?

Additional info: In Azure Active Directory, I have set Web as the redirect URI, as I was previously getting an error with SPA (please correct me if I have used the wrong redirect URI). I have also attached a sequence diagram explaining what I need to do with the auth code. Thanks in advance!

Edited: I have added the whole flow of communication channel with figma designs

Answer 1

CORS error usually occurs when the redirect is configured for onr url and routed for other than that.

After following the document,make sure the request URL in your code isn't missing a trailing slash.

for example, you may need to add a trailing slash in your code ex: http://localhost/api/auth/login/ or remove the slash if present or either way for http://localhost/api/auth/login and try. Also check if you are using http protocol in place of https.

• for example when you perform a request on:'http:// localhost/api/auth/login ' which might have to be 'https:// localhost/api/auth/login

You need to reply to that CORS preflight with the appropriate CORS headers to make this work with as 'Access-Control-Allow-Origin': '*',

header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

For that one need to set options to call the HTTP request,

const options = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
    Authorization: 'Basic ',// give  authorization method here
    'Access-Control-Allow-Headers':
      'Origin, X-Requested-With, Content-Type, Accept'
  })
};

getPerson(name: string): Observable<any> {
    return this.http
      .get<any>(yourbaseurl + '/sdfk/' + name, options)
      .pipe(catchError(this.handleError));
}

Reference : Cross-origin resource sharing error: PreflightInvalidstatus in Azure Application API - Stack Overflow