1

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. Sequence diagram explaining the communication channel flow Thanks in advance!

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

Shrey Soni
  • 31
  • 9
  • It sounds like you are trying to make an HTTP request to /authorize from your front-end. This is not correct. You should make a redirect to /authorize to authenticate the user. If you use MSAL.js, it'll do this for you. – juunas Jan 10 '23 at 07:13
  • basically, I need auth code which I will be sending it to the back-end and further process of getting the token will be done by the back-end so can you help me in this; how I can use MASL.js to get the auth code. – Shrey Soni Jan 10 '23 at 07:21
  • @ShreySoni do you use any library or are you trying to program this by yourself? (you should use a lib). search for msal, open the github page and follow the instructions (that is way to complicated to put here). they also have a wrapper for angular which you might want to use. Also! You have to put your localhost as a redir url in the aad app registration – hogan Jan 10 '23 at 07:40
  • @Juunas, can I whitelist the IP in Azure will it work ? – Shrey Soni Jan 10 '23 at 08:01
  • No, you cannot. I suggest that you check the tutorial for implementing authentication in a front-end SPA: https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial/blob/main/1-Authentication/1-sign-in/README.md – juunas Jan 10 '23 at 08:26

1 Answers1

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.

enter image description here

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

kavyaS
  • 8,026
  • 1
  • 7
  • 19