question

KommineniSateesh-0682 avatar image
0 Votes"
KommineniSateesh-0682 asked ·

CORS Issue while trying to access Web API from SPA App

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

azure-ad-openid-connect
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

alfredorevilla-msft avatar image
0 Votes"
alfredorevilla-msft answered ·

Hello @KommineniSateesh-0682, 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.

·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

KommineniSateesh-0682 avatar image
0 Votes"
KommineniSateesh-0682 answered ·

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

· 3 ·
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Can you share all the WebApi Authentication and Authorization related code and setup?

0 Votes 0 ·

@KommineniSateesh-0682, @alfredorevilla-msft. I have the exact same setup and seeing the same issue, were you able to find the solution for this? Even though Bearer token is sent along with the WebAPI call, it redirects to the authorize endpoint and gives a CORS issue

0 Votes 0 ·

Did you fix the problem? I'm running into exactly the same.

1 Vote 1 ·