Flowable-task/process-api cors configuration

I am working with cloned project locally and I have tried to connect to from flowable-task/process-api from a third party application that is running on localhost:4200, but I am getting CORS problems:

Failed to load http://localhost:8080/flowable-task/process-api/query/tasks: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access. The response had HTTP status code 401.

Based on error above I have tried to add a global CORS configuration as it is recommended in spring documentation but it does not work:

package org.flowable.app.conf;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
    .allowCredentials(true)
    .allowedMethods("POST"," GET","PUT", "OPTIONS", "DELETE", "PATCH")
    .maxAge(3600)
    .allowedHeaders("Authorization", "X-Requested-with","Accept","Content-Type")  
    .allowedOrigins("http://localhost:4200")
    ;
}

}

How could I solved the CORS problem?

Thanks in advace!!

@fabianyvidal,
Spring security documentation on this helped me solve the problem that you are having:
https://docs.spring.io/spring-security/site/docs/current/reference/html/cors.html

thanks @horsey, based on your answer I realized that the key point was to make cors be processed before Spring Security, so I create a filter and use .addfilterBefore() in ApiWebSecurityConfigurationAdapter and it worked:

@Configuration
@Order(1)
public static class ApiWebSecurityConfigurationAdapter extends WebSecurityConfigurerAdapter {
    protected void configure(HttpSecurity http) throws Exception {
        http
                .sessionManagement()
                .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                .and()
                .csrf()
                .disable()
                .antMatcher("/*-api/**").authorizeRequests()
                .antMatchers("/*-api/**").authenticated()                    
                .and().httpBasic().and().addFilterBefore(new CORSFilter(), ChannelProcessingFilter.class);
    }            
}

I created filter as:

 @Component
public class CORSFilter implements Filter{
    static Logger logger = LoggerFactory.getLogger(CORSFilter.class);

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
      
    	HttpServletRequest request = (HttpServletRequest) req;
		HttpServletResponse response = (HttpServletResponse) res;
		
		response.setHeader("Access-Control-Allow-Origin","http://localhost:4200");
		response.setHeader("Access-Control-Allow-Credentials", "true");
		response.setHeader("Access-Control-Allow-Methods", "POST, GET,PUT, OPTIONS, DELETE");
		response.setHeader("Access-Control-Max-Age", "3600");
		response.setHeader("Access-Control-Allow-Headers", "Authorization, X-Requested-with,Accept,Content-Type");
		
		if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {			
	        response.setStatus(HttpServletResponse.SC_OK);
	    } else {
	    	
	        chain.doFilter(req, res);
	    }         
    }

    public void destroy() {}
}
1 Like

Did you put this on separated jar, or, overwrite flowable class and rebuild ? I’m with same problem but I don’t have much experience with spring boot.

Can’t we configure CORS for Flowable without touching Flowable Source Code?

1 Like

I’m also looking for a solution for this. Without touching code.

Hi All,

I am also struck in browser same-origin policy and need to enable CORS inside flowable to make communication between angular–>flowable.

Please help in case someone has resolved this issue without changing flowable source-code.

Regards
Naman Chopra

Dear @fabianyvidal and @martin.grofcik

I’m reaching out regarding an issue I’m encountering while trying to access APIs through a React application. I’m experiencing CORS (Cross-Origin Resource Sharing) problems and have attempted various solutions without success. I have also tried your approach @fabianyvidal but yet still facing issues with the CORS, maybe somewhere I might have missed some implementation.

I would be grateful if you could share any insights or suggestions you might have to resolve this issue. Any relevant experience or workaround strategies you could provide would be greatly appreciated.

Thank you for your time and assistance.

Sincerely,
@RishikeshVIncture