Click here to Skip to main content
15,904,416 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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?
Posted
Comments
Richard Deeming 18-May-23 6:53am    
You configured the CORS headers where, precisely?

They need to be returned by the remote server you're trying to access. If you've configured the headers on the calling site, rather than the called site, they will have no effect.
Office Systems 18-May-23 8:28am    
The cors headers are configured by the spring boot project not the frontend app or calling site @Richard Deeming

1 solution

The problem isn't in your code, rather the problem is with your deployment. You have stated that you deployed your application to Azure, and this brings its own set of expectations. Basically, the CORS request is being blocked by Azure, not by your application. What you need to do is manage the CORS capability yourself - take a look at the documentation here[^] to understand how you can manage CORS in Azure.

[Edit - I posted this response without seeing that this was an old question. The answer still stands though, and could be useful to others in the future.]
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900