Получение ошибки CORS при отправке REST-вызова из Angular в Camunda Rest-Engine

Я новичок в Camunda и хотел написать небольшую программу на Angular, которая управляет развернутым процессом BPMN с помощью движка REST.

Пока все хорошо, поэтому я загрузил платформу сообщества с открытым исходным кодом с официального сайта Camunda https://camunda.com/de/download/. Я также смог запустить все через start-camunda.bat и TomCat, инициализированный на localhost:8080. Мой процесс также развернут, и я могу отправлять вызовы REST через Postman, чтобы контролировать процесс и получать информацию.

Так что REST-вызовы через Postman работают!

Теперь о моей проблеме. Мое приложение Angular работает ng serve на localhost:4200, и, конечно, возникают проблемы с CORS, когда я отправляю GET-запрос http://localhost:8080/engine-rest/process-definition из приложения.

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, он все равно получит следующую ошибку CORS.

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, но в моем случае это не так, и я не могу объяснить, как и почему. Так что, может быть, это просто супер, и я просто дурак


angular rest cors camunda tomcat
person CrazyEight    schedule 25.06.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Используйте приведенный ниже код в прокси-файле

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

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

person surendra kumar    schedule 25.06.2020
comment
Похоже, это не работает. По-прежнему возникает та же ошибка CORS. Но я обнаружил, что если я запускаю Chrome с Аргументами времени выполнения --disable-web-security, вызовы больше не блокируются CORS. Таким образом, кажется, что только браузер несет ответственность за ошибку CORS. Но я все еще не понимаю, почему Прокси не работает должным образом ... - person CrazyEight; 26.06.2020
comment
CORS в любом случае предназначен для обработки из браузера из-за задействованных HTTP-запросов. Тем не менее, есть ли какие-либо обновления для решения этой проблемы? @CrazyEight - person NitinSingh; 19.10.2020

arrow_upward
0
arrow_downward

Это общая ошибка при вызовах отдыха с разных сторонних серверов. Когда вы вызываете api из внешнего интерфейса (Angular, React, что угодно), которое находится в серверной части (Tomcat, Jetty, Python, PHP, Node, что угодно), вам необходимо указать в своей задней части фильтр cors, который позволяет специально URL-адрес вашего внешнего интерфейса. После этого посмотрите на этот фрагмент кода, как включить это в 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 (без).

person Marcos Vinicius Pinto    schedule 15.07.2020