CORS Issue When Accessing Qlik App Followed by React Dashboard on Separate Domains

[vijaya6]

Hello ,

We are experiencing a CORS (Cross-Origin Resource Sharing) issue involving our React dashboard and a Qlik application, both hosted on separate domains.

Scenario:

• Our React dashboard (GRCW) is deployed on Cloud and connects to Qlik as an external data source through capability API.
• The React dashboard’s domain is already whitelisted in QMC.
• If a user opens the React dashboard first, everything works as expected and there are no CORS issues.
• However, if a user opens the Qlik app directly in their browser first, and then (in the same browser session) opens our React dashboard, the browser throws a CORS error when the dashboard tries to connect to Qlik for data.

Observed Behavior:

• The Access-Control-Allow-Origin header appears to be set to the first domain accessed (Qlik app).
• When the React dashboard tries to connect to Qlik, the browser continues to use the previous CORS header value instead of making a fresh request.
• This results in a CORS error and blocks the data request from our dashboard.

Root Cause (Suspected):

• The reverse proxy or backend serving the Qlik app may not be dynamically setting the Access-Control-Allow-Origin header based on the incoming request’s Origin.
• CORS headers might be cached, causing the browser to reuse stale values and leading to failures when switching between applications on different domains.

What We’ve Tried:

• The React dashboard’s domain is already whitelisted in QMC.
• Investigated reverse proxy and backend configuration.
• Attempted to set CORS headers dynamically and prevent caching using Vary: Origin and Cache-Control: no-store.

Questions for the Qlik Team:

1. Is there a recommended way to configure Qlik’s backend or reverse proxy to handle dynamic CORS headers for multiple domains?
2. Are there any best practices or configuration options in Qlik to ensure that the Access-Control-Allow-Origin header is set correctly for each incoming request?
3. Has anyone else faced similar issues when integrating Qlik with external React applications, and how was it resolved?
4. Are there any Qlik-specific settings or documentation that address CORS header caching or dynamic origin handling?

Additional Details:

• Our React dashboard is hosted on Gaia Cloud.
• The Qlik app and the dashboard are accessed from different domains.
• The issue only occurs when the Qlik app is opened first, followed by the React dashboard, in the same browser session.
  
  NOTE: also kindly let me know will Qlik-embed solves this issue ? if so how ?

Any guidance, documentation, or examples would be greatly appreciated!

Thank you,