I am trying to login with guacamole from react app but getting cors; what I am doing wrong?

Question

I am trying to login guacamole form react js web application. My guacamole server is on tomcat server, and my react app is on node js; both are on different domains. I used nagix proxy on server, but I am still getting a cors error.

const baseURL = 'http://myurl/api'; // Replace with your Guacamole server URL
      const username1 = username; // Replace with your Guacamole username
      const password1 = password; // Replace with your Guacamole password

      // Define the API endpoint for authentication
      const authEndpoint = '/tokens';

      // Create a basic authentication header with your username and password
      const authHeader = {
       
        'Authorization': 'Basic ' + Buffer.from(`${username1}:${password1}`).toString('base64'),
      };

      

      // Step 1: Authenticate and obtain a token
      axios.post(baseURL + authEndpoint, { headers: authHeader })
        .then(response => {
          const authToken = response.data.authToken;
          console.log('Authentication Token:', authToken);

          // Step 2: Use the authentication token for subsequent requests
          const headers = {
            'Authorization': `Bearer ${authToken}`,
          };

          // Define the API endpoint for the subsequent request
          const apiEndpoint = '/session/data'; // Modify this as needed for other API endpoints

          console.log(apiEndpoint)

          axios.get(baseURL + apiEndpoint, { headers })
            .then(response => {
              console.log('Active Sessions:', response.data);
            })
            .catch(error => {
              console.error('Error:', error.message);
            });
        })
        .catch(error => {
          console.error('Authentication Error:', error.message);
        });

    }

Answer 1

At first you need to cors configure in your web.xml file, which is located in \var\lib\tomcat9\webapps\guacamole\WEB-INF/web.xml in ubuntu. i run react sample app in localhost:3000. Now add your cors origin in web.xml. here are sample configuration. after that restart tomcat and guacd.

<filter>
    <filter-name>cacheRevalidationFilter</filter-name>
    <filter-class>org.apache.guacamole.CacheRevalidationFilter</filter-class>
    <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>http://localhost:3000</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>cacheRevalidationFilter</filter-name>
    <url-pattern>/index.html</url-pattern>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>