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

Siddartha Pal 1 Reputation point
2022-05-05T19:10:53.517+00:00

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....

Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
7,342 questions
Microsoft Entra ID
Microsoft Entra ID
A Microsoft Entra identity service that provides identity management and access control capabilities. Replaces Azure Active Directory.
20,541 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Takahito Iwasa 4,841 Reputation points MVP
    2022-05-05T20:27:39.67+00:00

    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

    1 person found this answer helpful.