Creating own java web app front end for the engine

Camunda 7 Topics Discussion & Questions
1

Basically making my own tasklist/cockpit while using the camunda engine so that i can format the layout to my own needs as well implement additional functionality.

Currently having issues with running the camunda server locally alongside my own localhost for my web application.
Looking for suggestion on the best way to carry out this integration, any advice or links to tutorials would be helpful.

2

Hi @AleenaSiddiqi97
you might want to read https://blog.camunda.com/post/2018/02/custom-tasklist-examples/ and check out the examples.
What issues do you face? CORS?

Best
Felix

3

Thanks for the examples, theyā€™ve been helpful. Yes im having issues with CORS while attempting to use the Rest apiā€™s.

Aleena

4

In the example of the mentioned blogpost, I proxy the rest requests from the frontend dev server to the engine. Alternatively you can also allow CORS requests in the app server.
Best
Felix

1 Like
5

How would I allow CORS requests in the app server?

Regards,

Aleena

6

@AleenaSiddiqi97 Using FilterRegistration you can add your cors filter, this is like java config. If you are using camunda spring boot starters, java config would be easiest way. you can use any of these approaches to configure cors in your application.

@Configuration
public class CorsConfiguration {

	@Bean
	public FilterRegistrationBean corsFilter() {
		UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
		CorsConfiguration config = new CorsConfiguration();
		config.setAllowCredentials(true);
		config.addAllowedOrigin("http://domain1.com");
		config.addAllowedHeader("*");
		config.addAllowedMethod("*");
		source.registerCorsConfiguration("/**", config);
		FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
		bean.setOrder(0);
		return bean;
	}
}

@Configuration
public class CorsConfiguration {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**");
            }
        };
    }
}

@Override
public void addCorsMappings(CorsRegistry registry) {
	registry.addMapping("/api/**")
		.allowedOrigins("http://domain2.com")
		.allowedMethods("PUT", "DELETE")
			.allowedHeaders("header1", "header2", "header3")
		.exposedHeaders("header1", "header2")
		.allowCredentials(false).maxAge(3600);
}

If you are using full distribution of camunda, incase of jboss, you can configure cors in xml configuration file (standalone.xml). Server Config file differs from server to server.

1 Like
7

Iā€™ve tried configuring CORS filters in the standalone.xml by adding the following config (see pic below):

Iā€™ve also set the headers on the request as such:
xhttp.open(ā€œGETā€, ā€œlocalhost:8080/engine-rest/process-definition?latest=trueā€, true );

xhttp.setRequestHeader(ā€œContent-Typeā€, ā€œapplication/jsonā€);

xhttp.setRequestHeader(ā€œAccess-Control-Allow-Originā€, ā€œhttp://localhost:9090ā€);

xhttp.withCredentials = true ;

yet i still get the error:
Access to XMLHttpRequest at ā€˜localhost:8080/engine-rest/process-definition?latest=trueā€™ from origin ā€˜http://localhost:9090ā€™ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

49
491401Ɨ644 129 KB

8

XMLHttpRequest cannot load localhost:4201/ticker. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Any time you see that ā€œonly supported for protocol schemesā€ message, it almost certainly means youā€™ve just forgotten to put the https or http on the request URL in your code.

1 Like
9

Was missing the http in the request, this fixed the issue. Thanks a lot

10

Hi Felix,

Is there any way you could explain how you proxy the REST requests, specifically in the Angular example?

Best,
Matt
BP3