Question

我对Camunda并不陌生，我想编写一个小的Angular程序，该程序使用REST引擎控制已部署的BPMN流程。

到目前为止，一切顺利，因此我从Camunda官方网站https://camunda.com/de/download/下载了开源社区平台。我还可以通过start-camunda.bat和在localhost:8080上初始化的TomCat来启动所有内容。我的流程也已部署，并且能够通过Postman发出REST调用来控制流程并获取信息。

因此通过Postman进行的REST调用有效！

现在是我的问题。我的Angular应用在ng serve上的localhost:4200上运行，当我从应用发送GET-Request http://localhost:8080/engine-rest/process-definition时，当然会出现CORS问题。

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

经过一些互联网研究，我找到了两种解决方案。您可以在Angular应用中设置代理：

解决方案1-代理

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
          },...

如果我随后执行ng serve，它会告诉我[HPM] Proxy created: /engine-rest -> http://localhost:8080，但是当我发送剩余呼叫时，仍然会收到以下CORS错误。

解决方案2-TomCat web.xml

我尝试的第二个解决方案是在web.xml下的server\apache-tomcat-9.0.33\webapps\engine-rest\WEB-INF\web.xml顶部添加一个过滤器，然后重新启动服务器。

过滤器

<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>

因此，这两个解决方案都应解决该CORS错误，但就我而言，它们不能解决，我也无法解释如何以及为什么。所以也许这只是超级简单而我只是愚蠢

Answer 1

在代理文件中使用以下代码

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

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

Answer 2

这是从其他前端到后端的剩余调用的一般错误。当您从后端（Tomcat，Jetty，Python，PHP，Node等）的前端（角度，React等）调用api时，您需要在后端指定一个cors过滤器，该过滤器可专门用于您前端的网址。之后，请看这段关于如何在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>

请注意以下标记：“ cors.allowed.origins”，在其下方的相应标记中添加您的前端地址：“ http：// localhost：4200”（不带“）。

从Angular向Camunda Rest-Engine发送REST-Call时出现CORS错误

解决方案1-代理

解决方案2-TomCat web.xml

2 个答案: