CORS Issue when added OPENID Active Directory Authentication to Azure App service while using Angular as web app and Spring boot as web api

Gholap Amol 16 Reputation points

we have two App services in Azure in tenant A

(a) Web APP (Angualr 11)
(b) API App (Spring boot 2.6.7)

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


Example given here( I tried almost all, most of them are not in working state , I am guessing (3-Authorization-II)
is the most appropriate for our need
Have anyone faced any similar issues, can provide some help on this

Microsoft Entra ID
Microsoft Entra ID
A Microsoft Entra identity service that provides identity management and access control capabilities. Replaces Azure Active Directory.
19,767 questions
0 comments No comments
{count} vote

1 answer

Sort by: Most helpful
  1. Shweta Mathur 28,021 Reputation points Microsoft Employee

    Hi @Gholap Amol ,

    Thanks for reaching out.

    I understand you are trying to call protected web-api through angular 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 prevents a malicious site from reading sensitive data from another site.

    Cross Origin Resource Sharing (CORS) allows a server to relax this restriction and allow cross domain calls.

    To enable CORS in spring Boot to allow request from web application using controller method or globally:

    1. Add @CrossOrigin annotation to specific action method to allow requests from http://localhost:4200 or add @CrossOrigin as class level as well. @CrossOrigin(origins = "http://localhost:4200")
      public Product getProduct(@RequestParam(required = false, defaultValue = "Books") String name)
    2. You can enable CORS globally to accepts requests to access Web API for each methods by adding CORS mapping in Spring MVC configuration. public WebMvcConfigurer corsConfigurer() {
      return new WebMvcConfigurer() {
      public void addCorsMappings(CorsRegistry registry) {
      } 3.If you are using Spring Security, you can easily add cors in security configuration

    public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    protected void configure(HttpSecurity http) throws Exception {

    For granular access, you can apply CORS configuration to specific path using three parameters to allow calls with specific conditions:

    1.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.
    2.Headers - application/x-www-form-urlencoded, multipart/form-data, text/plain
    3.Methods - GET, PUT, and POST methods calls are allowed. You can restrict GET calls only.

    Reference :

    Hope this will help.


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

    1 person found this answer helpful.