Solving CORS problem on embedding Pentaho CDE dashboard in web application

solving-cors-pentaho-cde.md

Solving CORS problem on embedding Pentaho CDE dashboard in web application

Cross-Origin Resource Sharing (CORS) is a W3C spec that allows cross-domain communication from the browser. By building on top of the XMLHttpRequest object, CORS allows developers to work with the same idioms as same-domain requests.

Enable Cross Origin Resource Sharing (CORS) in the Community Dashboard Framework (CDF), Community Dashboard Editor (CDE), and Community Data Access (CDA). While you need CDE to embed the dashboard, you will access it from a different server other than the Pentaho Server, so CORS must be enabled in CDF, CDE and CDA. Open the following CDF, CDE, and CDA settings.xml files in a text editor:

• For CDF: server/pentaho-server/pentaho-solutions/system/pentaho-cdf/settings.xml.
• For CDE: server/pentaho-server/pentaho-solutions/system/pentaho-cdf-dd/settings.xml.
• For CDA: server/pentaho-server/pentaho-solutions/system/cda/settings.xml.

Make the following replacements in each settings.xml file:

1. Find the line:

<cors-request-allowed>false</cors-request-allowed>

and then change it to:

<cors-request-allowed>true</cors-request-allowed>

2. Find the line:

<cors-requests-allowed-domains><!-- allowed domains here --></cors-requests-allowed-domains>

and then change it to:

<cors-requests-allowed-domains>http://localhost:2777</cors-requests-allowed-domains>

3. Add cors-filter-2.4.jar to the <<pentaho-server>>/tomcat/lib directory.

Download: cors-filter-2.4.jar

4. Add below filter-mapping into the <<pentaho-server>>/tomcat/conf/web.xml file:

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

Resources

• https://www.w3.org/TR/cors/
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
• https://enable-cors.org
• https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
• https://help.pentaho.com/Documentation/8.0/Products/CTools/CDE_Advanced_Solutions
• http://www.ease2code.com/embedding-pentaho-cde-dashboard-in-web-application/
• https://daveceddia.com/access-control-allow-origin-cors-errors-in-react-express/

hi, have link the library cors-filter-2.4.jar ?
try te configuratioon but nothing

Hey @magoya1487 try this link: https://search.maven.org/remotecontent?filepath=com/thetransactioncompany/cors-filter/2.4/cors-filter-2.4.jar