VMware Cloud Community
oscaralvarez
Enthusiast
Enthusiast

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

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-***************/execution...',

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

Reply
0 Kudos
1 Reply
risito777
Contributor
Contributor

Hi! Have you tried using "Origin" header with your vRO URL as value?. It worked for me!

https://www.linkedin.com/in/eric-daniel-cano-394022117/
Reply
0 Kudos