CORS Issue while trying to access Web API from SPA App

Question

Hi ,

I have registered two apps using "App Registrations" in Azure AD. One as SPA and the Other as Web API. (Both of them are configured for implicit grant flow)

My SPA is developed using React and i am using "react-aad-msal" and when i try to access the UI i am getting the login and getting the id and access tokens as expected.

And from the UI i am trying to access the REST End Points exposed by the Web API. And that is when i am getting the CORS Error:

Access to XMLHttpRequest at 'https://login.microsoftonline.com/common/oauth2/authorize?response_type=code&client_id=<CLIENT_ID>&scope=openid%20https://graph.microsoft.com/user.read&state=<STATE_ID>&redirect_uri=https://<MY_APP_DOMAIN>/datamallservice/login/oauth2/code/azure' (redirected from 'https://<MY_APP_DOMAIN>/appservice/getinfo') from origin 'https://www.mydomain.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

My SPA and Web API both are deployed behind the same ALB and have the same domain name

I checked the Request headers while SPA is trying to make a Rest Call to Web API and the Request header has the "authorization" header with the value "Bearer <TOKEN>" ( which i am setting using the idtoken value i got in the UI ) and i am also seeing in the Response header "access-control-allow-origin" is set to "*"

Not sure why i am getting the CORS Error.

Thanks
Sateesh

Answer 1

Hello @Kommineni, Sateesh , endpoint https://login.microsoftonline.com/common/oauth2/authorize does not support CORS. Somehow you're doing an AJAX call from your SPA instead of a hidden call from an iframe. A second issue that I spot is using the id token for authorization. You should use an access token.

For the first issue please share code related to the SPA authorization config and token request.

Please let me know if you need more help. If the answer was helpful to you, please accept it and, optionally, provide feedback so that other members in the community can benefit from it.

Answer 2

Hi Alfred,

Thanks for pointing out that i am passing the id token rather than the Access Token. I have fixed that.

The way Web App ( Developed using Spring Boot and just exposes a bunch of REST EndPoints) is registered is as a Web Platform with Azure AD and i have provided the Redirect URL as

https://<MY_APP_DOMAIN>/datamallservice/login/oauth2/code/azure

When i load my SPA it is Authenticating with Azure AD and getting the tokens as expected ( idToken, Access Token)

When i try to make an AJAX Call to the Web API Rest End Point i am adding the Header "Authroization" with the Bearer Token ( using the Access Token) and that is when the requests are getting intercepted (some how the Web API thinks the user is not Authenticated and the access token passed is ignored) and the request is getting routed to /login/oauth2/code/azure endpoint and eventually throwing the CORS Error.

Thanks
Sateesh

Answer 3

Hi @Kommineni, Sateesh @Alfredo Revilla - Senior Freelance SWE, SWA, IAM , I ran into the same problem. Couldn't find the solution elsewhere. If you have solved this issue can you share the solution?

Answer 4

I have the same issue. The call is made to the server side web api passing the token and the middleware appears to be spitting back a redirect (what the post is about).
Anyone knows how to fix this? Very frustrating!

Answer 5

our on premise apps UI and web api working fine(both under different site), from UI by axios we are calling web api.

I have registered two apps using "App Registrations" in Azure AD. One as SPA and the Other as Web API.
calling SPA prompt authentication, but failing when SPA calling api with CORS exception.

do I need to change my code? any suggestion how I can call api? any sample code?

SPA(.netcore, react)
api(.netcore)