Qlik Sense Enterprise Cloud SaaS and React.js CORS/CSP issues

[dnordstrom]

We've been setting up dashboards in the SaaS cloud solution for Qlik Sense Enterprise. Now we'd like to fetch and display such visualizations in our React.js web app using the qdt-components package, either using the visualization API or Picasso. However, when I try the demo code (from https://github.com/qlik-demo-team/qdt-components/blob/master/docs/usage/React.md), I get CORS errors saying:

Access to XMLHttpRequest at 'https://<our account>.eu.qlikcloud.com/api/v1/csrf-token' from origin 'http://our-app.loc:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to XMLHttpRequest at 'https://<our account>.eu.qlikcloud.com/api/about/v1/language' from origin 'http://our-app.loc:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

WebSocket connection to 'wss://<our account>.eu.qlikcloud.com/app/<app id>/identity/wejlwWbvqWuKeIui?reloadUri=http%3A%2F%2Four-app.loc%3A3000%2Flogin' failed: HTTP Authentication failed; no valid credentials available

I've noticed that all tutorials and most posts use the Windows server software, which seems to have settings for CORS/CSP as well as things like virtual proxies. How can we do this in the SaaS cloud version?

If somebody could point us in the right direction, that'd be awesome!

[JamieJ]

Hello. For Cloud SaaS you can find examples for configuring CORS at https://github.com/qlik-oss/web-integration-examples

In short, within the management console for your tenant you create a Web Integration in which you whitelist your external domain. Once defined, you then configure your React.js app with your cloud tenant URL and Web Integration ID which will allow configuration of the appropriate CORS headers for your domain.

[dnordstrom]

Thanks for your reply. The web integration examples seem to work well, great.

They do not use the QdtComponents React components though, and QdtComponents does not seem to handle any webIntegrationId config option. Is this not supported in QdtComponents?

[dnordstrom]

I forked QdtComponents and got the Visualization API to work with web integration ID. But how do I go about authentication with Enigma.js when using QSE on Cloud? The examples are for JWT and certificates, neither of which I think we can use in Cloud.

[nicefella · Accepted solution]

Hi, did any one manage to find a solution for this?

My /api/v1/csrf-token request gives me 404 too when I include an Authorization header with Bearer {access_token}.