Getting CORS Error when sending REST-Call from Angular to Camunda Rest-Engine

Question

I am quite new to Camunda and I wanted to write a small Angular program that controls a deployed BPMN process using the REST engine.

So far so good, so I downloaded the Open Source Community Platform from the official Camunda site https://camunda.com/de/download/. I was also able to start everything via start-camunda.bat and TomCat initialized on localhost:8080. My process is also deployed and I am able to place REST calls via Postman to control the process and get information.

So REST calls via Postman works!

Now to my problem. My Angular App runs over ng serve on localhost:4200 and of course there are CORS problems when I send the GET-Request http://localhost:8080/engine-rest/process-definition from the App.

this.http.get<any>('http://localhost:8080/engine-rest/process-definition')
    .subscribe(x => console.log(x));

After some internet research I found 2 solutions. Either you set up a proxy in the Angular App:

---

Solution 1 - Proxy

src/proxy.conf.json

{
  "/engine-rest": {
      "target": "http://localhost:8080"
      "secure": false,
      "logLevel": "debug"
  }
}

angular.json

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angularTest:build",
            "proxyConfig": "src/proxy.conf.json"  <-- Add this line
          },...

If I then execute a ng serve it will tell me [HPM] Proxy created: /engine-rest -> http://localhost:8080 but when I send the Rest Call it still gets me the following CORS Error.

---

Solution 2 - TomCat web.xml

The second solution I tried was to add a filter to the top of the web.xml under server\apache-tomcat-9.0.33\webapps\engine-rest\WEB-INF\web.xml and restart the server.

Filter

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

---

So both of those solutions should fix that CORS Error, but in my case they don't and I can't explain how and why. So maybe it's just super simple and i'm just stupid

Answer 1

Use below code in proxy file

//Change
{
  "/engine-rest": {
      "target": "http://localhost:8080"
      "secure": false,
      "logLevel": "debug"
  }
}

//TO
{
  "/engine-rest": {
      "target": "https://camunda.com/"
      "secure": false,
      "logLevel": "debug"
  }
}

Answer 2

This is a generic error on rest calls from a different front to back end. When you call an api from a front end (Angular, React, anything) that is in a back end (Tomcat, Jetty, Python, PHP, Node, anything), you need to specify in your back end a cors filter that allows specifically the url from your front end. After this, look at this piece of code on how to enable this in Tomcat:

 <filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
  <init-param>
    <param-name>cors.support.credentials</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>cors.preflight.maxage</param-name>
    <param-value>10</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

Note the tag with this: "cors.allowed.origins", put in the respective tag below it your front end address: "http://localhost:4200" (without ").