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

Question

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

Example given here(https://github.com/Azure-Samples/ms-identity-msal-java-samples/tree/main/4.%20Spring%20Framework%20Web%20App%20Tutorial) 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

Answer 1

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")
   @GetMapping("/products")
   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() {
   @Override
   public void addCorsMappings(CorsRegistry registry) {
   registry.addMapping("/products").allowedOrigins("http://localhost:4200");
   }
   };
   } 3.If you are using Spring Security, you can easily add cors in security configuration

@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

@Override
protected void configure(HttpSecurity http) throws Exception {
http.cors().and()...
}
}

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 : https://spring.io/guides/gs/rest-service-cors/

Hope this will help.

Thanks,
Shweta

---

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