CORS Issue when added OPENID Active Directory Authentication to Azure App service

Question

we have two App services in Azure in tenant A

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

Have anyone faced any similar issues, can provide some help on this

Answer 1

Hi @Manny ,

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.

Answer 2

Hi,

I am getting similar kind of issue
"Access to XMLHttpRequest at 'https://login.microsoftonline.com/<tenant-id>/oauth2/v2.0/authorize?response_type=code&client_id=<client-id>c&scope=openid%20profile%20offline_access&state=tdP9xWxYux0cQYbaEC4sdZkaxB8QCBkhuEdvI2dADzc%3D&redirect_uri=http:localhost:5000/login/oauth2/code&nonce=ss6_2m2Tmc_SBRlv0OdCyJO2VlRJqAUlGk7N1JNeZVg' (redirected from 'http://localhost:4200/lacetool/get/allCases/pagination/0/10/false/null') from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

I am using Angular(Msal) in frontend and spring boot in backend
I have annotated the rest-api calls with @CrossOrigin(origins = {"*"}) also tried with specific host name like -@CrossOrigin(origins = "http://localhost:4200")

nothing helps, very frustrating

Samples given here on github(https://github.com/Azure-Samples/ms-identity-msal-java-samples/tree/main/4.%20Spring%20Framework%20Web%20App%20Tutorial) just updated on March 2022 are not in working conditions that very sad.