CORS Issue for Angular 13 app connecting to Web API Core hosted on Azure

Question

We have an Angular 13 front end app and a web API Core project hosted on Azure app service.
(FYI-We are using Azure AD authentication. We are using MSAL for Azure AD authentication)

When we run the Front end app locally and try to hit one end point ( web api running locally), we get the response without any issues.

But when the same code is deployed on Azure development environment and we test the same functionality, we are getting the following error:-

Access to XMLHttpRequest at 'https://api.dev.site.io/portal/api/case from origin
'https://portal.dev.site.io' has been blocked by CORS policy: Response to preflight
request doesn't pass access control check: It does not have HTTP ok status.
Any inputs would be very helpful.

best regards....

Answer 1

Hi, @Siddartha Pal

I understand that you are hosting the front app on portal.dev.site.io and the API on api.dev.site.io and need to resolve the CORS issue.

From the tag of this thread, is the API server hosted by App Service?
You can change the setting to output the Access-Control-Allow-Origin header to portal.dev.site.io by using the CORS function of App Service.

See the following link:
https://learn.microsoft.com/ja-jp/azure/app-service/app-service-web-tutorial-rest-api