CORS Policy error during integration of REST API and UI

Question

We have a UI that is sitting on a Web Service resource within the Azure portal (public cloud - MSFT tenant). Additionally, we have our REST API sitting on an Azure Function within the same resource group. Both the resources have an identity provider linked to them for authentication using MSFT creds.

As standalone URLs, we are able to see information and functionality on both (UI is able to display all the information it can as a standalone UI and the REST API is able to give the JSON information that it is supposed to on the standalone URL)

Problem:
While hitting the REST API from the UI, the GET API call is giving a 200 the first time and moving to do the authentication and authorization for the REST API. At the authorization, the response is a CORS error, which causes the actual API to return a 302 (API is configured to return a 302 if the authentication/authorization fails).

The CORS issue is as follows: Access to XMLHttpRequest at 'https://login.windows.net/72f988bf-86f1-41af-91ab-2d7cd011db47/oauth2/v2.0/authorize' (redirected from) from origin 'http://localhost:4200' 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.

Things I have tried:

1. Built a proxy config for the APIs to be targeted to the API link. Still returns a 302.
2. Added HttpHeaders option into the GET calls with Content-Type, Accept, Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Credentials. Still returns a 302.
3. Added an HttpHeader for the API to allow XHttpRequests. Returns a 400 on the API call.
4. Added the login.microsoft.net link on the CORS policy for the API Function App in the portal.

I am not sure what I am missing here in terms of the integration. Wanted to check what I am doing wrong or if there is some other alternative in solving this issue? Thanks in Advance.

Answer 1

@Sanchit Razdan Looks like the CORS headers are not present on the redirection response, hence the error you are seeing.

You have a few options here

1. Implement the Authentication Flow to get the token for your Function App manually and then pass it along with your request
2. Make a call to your function app in a separate window/tab, so that the cookie is set and allowing future requests to go through. This endpoint could load a page that simply closes itself on success.
3. Implement Authentication as part of your application itself and pass bearer tokens instead of Easy Auth. You could also consider using Azure API Management to offload token validation if required.

Ideally, the third option is usually the recommended approach when dealing with separate frontend and backend services.

The Easy Auth (Authentication/Authorization Feature in App Service) is best suited for scenarios where you have a self-contained app in a single Web App. Also, the same functionality within Azure Static Web Apps might be an option as well since API requests are proxied via the same domain.