CORS issue while calling .NET Core API and angular UI (Azure B2B)

Question

            We are facing this unique issue at CPUC. Please see the description below and let us know if you have faced similar issue with one of your clients.

we have two App services in Azure - we are using B2B

(a) Web APP (Angualr)
(b) API App (.NET Core)

'Web' App service calls 'API' App service to get data. 'Web' & 'API' app authentication is done by OpenID Active Directory Authentication. When we call the 'API' Service from the browser it works fine, but when we call the 'API' App within 'Web' App we are getting a CORS error

Access to XMLHttpRequest at 'https://login.microsoftonline.com/{tenant-id}/oauth2/v2.0/authorize?response_type=code&client_id={client-id}&redirect_uri=https%3A%2F%2F{AP%2F.api.azurewebsites.us%2Flogin%2F{auth provider}%2Fcallback&nonce=4&state=redir%3D%252Fapi%252Fbridge&scope=openid+profile+email' (redirected from 'https://api.azurewebsites.us/api/name') from origin 'https://webui.azurewebsites.us' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

Hi @Charan Mishra

Thanks for reaching out.

I understand that you are trying to call protected web API through Web Application and getting CORS error.

This is due to when the two applications are hosted at different domains then browser security prevents a web page from making requests to another domain. This restriction is called the same-origin policy and prevents a malicious site from reading sensitive data from another site.

Cross Origin Resource Sharing(CORS) allows a server to relax the same-origin policy and allow cross domain calls.

For .Net Core application, Firstly, Install NuGet Package Manager to allow cross domains calls by enabling CORS in Web API which installs the latest package and updates all dependencies.

dotnet add package Microsoft.AspNet.WebApi.Cors

The easiest way to enable CORS to add following in code to the WebApiConfig.Register

EnableCorsAttribute cors = new EnableCorsAttribute(“”,””,””)
Config.EnableCors(cors);

Three parameters of EnableCorsAttribute such as:

Origin - Use the URI where you deployed the WebApp. This allows cross-origin requests from your WebApp only, while still disallowing all other cross-domain requests.
Headers - application/x-www-form-urlencoded, multipart/form-data, text/plain
Methods - GET, PUT, and POST methods calls are allowed. You can restrict GET calls only.
e.g EnableCorsAttribute(“http://webapp.net”,”*”,”GET”)

Other way to enable CORS attribute is to add [EnableCors] in controller class either to enable CORS at class level or method level as:

[EnableCors(origins: "http://webapp.net ", headers: "*", methods: "*")]  
     public class TestController : ApiController  
     {  
         // Controller methods not shown...  
     }  
 }  

You can also disable CORS for an action, add the [DisableCors] attribute to the action which enables CORS for every method except that method.

There are other ways to enable CORS as well:
• In middleware using a named policy or default policy.
• Using endpoint routing.

We recommend using either [EnableCors] attribute or middleware, not both in the same application.

Hope this will help.

Thanks,
Shweta

--------------------------------------------------

Please remember to "Accept Answer" if answer helped you.