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

Posted 2023-03-04

【中文标题】将 REST-Call 从 Angular 发送到 Camunda Rest-Engine 时出现 CORS 错误

【英文标题】：Getting CORS Error when sending REST-Call from Angular to Camunda Rest-Engine

【发布时间】：2020-10-15 15:54:23

【问题描述】：

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

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

所以通过 Postman 的 REST 调用有效！

现在我的问题。我的 Angular 应用程序在 localhost:4200 上运行在 ng serve 上，当然当我从应用程序发送 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));

经过一些互联网研究，我找到了 2 个解决方案。您可以在 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，但是当我发送 Rest Call 时，它仍然会收到以下 CORS 错误。

---

解决方案 2 - TomCat web.xml

我尝试的第二个解决方案是在server\apache-tomcat-9.0.33\webapps\engine-rest\WEB-INF\web.xml 下的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 错误，但在我的情况下，他们没有，我无法解释如何以及为什么。所以也许它只是超级简单，我只是愚蠢

【参考方案1】：

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

//Change

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


//TO

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

【讨论】：

这似乎不起作用。仍然得到相同的 CORS 错误。但我发现，如果我使用运行时参数--disable-web-security 运行 Chrome，则 CORS 不再阻止调用。因此，似乎只有浏览器对 CORS 错误负责。但是我仍然很困惑为什么代理不能正常工作......

CORS 无论如何都要从浏览器处理，因为它涉及到 HTTP 请求。也就是说，有什么更新可以解决这个问题吗？ @CrazyEight

【参考方案2】：

这是从不同的前端到后端的休息调用的一般错误。当您从后端（Tomcat、Jetty、Python、php、Node 等）中的前端（Angular、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”（不带“）。