Deployed angular and spring boot projects on azure not working as expected

See more:

Java

JavaSE

Azure

Spring.NET

, +

I have deployed angular project in it's own app service and also deployed spring boot in its own app service the two applications works fine locally but the problem comes on production I get this error "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mineralsportal-api.azurewebsites.us/auth_api/authenticate. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 503" I don't know where the error comes from since I configured the cross-origin class to enable resource sharing and corsFilter class in spring boot but I'm getting this error on azure (production) even though it works perfectly fine locally.

What I have tried:

Here is my corsConfig class

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer(){
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**").allowedMethods("GET", "POST", "PUT", "DELETE")
                    .allowedOrigins("*")
                    .allowedHeaders("*");
            }
        };
    }
}

Here is my corsFilter class

@Component
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    response.setHeader("Access-Control-Expose-Headers", "Location");
    chain.doFilter(req, res);
    }
    
    @Override
    public void init(FilterConfig filterConfig) {}

    @Override
    public void destroy() {}

}

Here is my securityConfig class

@Configuration
@EnableWebSecurity
@SuppressWarnings("deprecation")
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private CustomUserService userService;

    @Autowired
    private RequestFilter requestFilter;

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userService);
    }

    @Bean
    @Override
    public AuthenticationManager authenticationManagerBean() throws Exception {
        return super.authenticationManagerBean();
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
    http.cors().disable();
    http.csrf().disable();
    http.authorizeRequests().antMatchers("/auth_api/authenticate").permitAll().anyRequest().authenticated()
    .and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    http.addFilterBefore(requestFilter, UsernamePasswordAuthenticationFilter.class);
    }
}

After a lot of googling I was not able to get the best answer that could help me resolve the issue any suggestions will be much I appreciated.

and is there any means in azure I can deploy both applications to run on the same app service (angular + spring boot) without packaging them on the same jar file?