0 Replies Latest reply on Sep 18, 2019 6:36 AM by oscaralvarez

    Using vRO api from a Node/React application and dealing with CORS

    oscaralvarez Novice

      Hi all

      My goal is to build a node application acting as a Frontend able to interact with vRO Rest API as the backend.

       

      I have successfully get that working using Postman, Curl and Javascript/Jquery code embed in a web page but having that done communication beetween 2 sites involves CORS policies.

       

      So , this is the error I got when runningg my code  as a served site application :

       

      localhost/:1 Access to XMLHttpRequest at 'https://vmmip-hvorch01:8281/vco/api/workflows/9957e86a-1ae9-46a4-be4a-********/executions' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

       

      It seems CORS is being enforced by Tomcat even when I add "no-cors"on the request data.

       

      I'm using Basic Auth (no Authtoken)

       

       

      This is my axios request (I also used Fetch function instead of Axios and I got a 401 even when sending valid credentials :

       

          axios({

            method: 'post',

            mode: 'no-cors',

            url: 'https://*******************:8281/vco/api/workflows/9957e86a-1ae9-46a4-be4a-***************/executions',

            data: formData,

            auth: {

              username: '******************',

              password: '********************'

            },

            config: { headers: {'Content-Type': 'application/json','Access-Control-Allow-Origin': '*','Accept': 'application/json', }},

            responseType: 'json',

            httpsAgent: new https.Agent({ rejectUnauthorized: false })

          })

          .then(function (response) {

              //handle success

              console.log("success!!");

              console.log(response)

         })

          .catch(function (response) {

              //handle error

              console.log("error!!");

              console.log(response)

          });

       

       

      Also I added these filters on Tomcat:

       

      <filter>

        <filter-name>CorsFilter</filter-name>

        <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>

        <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.origins</param-name>

          <param-value>*</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,Accept,Authorization</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>

      </filter>

      <filter-mapping>

        <filter-name>CorsFilter</filter-name>

        <url-pattern>/*</url-pattern>

      </filter-mapping>

       

       

       

      Is this configuration possible?? Anybody managed to build that??