SPA Integration Troubleshooting
This page provides information about common problems that you may run into while integrating Single-Page Applications (SPAs) with Bloomreach Content. Each section consists of a problem explanation, potential reasons causing the problem, and the solution that may help to solve the problem.
We'll continually update this page as we receive more feedback.
Channel preview in the Experience manager works intermittently in a clustered environment
Reason
The most likely cause for this issue is the session affinity between subsequent calls to CMS cluster nodes. The session affinity relies on a server-id query parameter being passed from Bloomreach Content during the redirect to the SPA. The SPA SDK will retrieve the received parameter and pass it to subsequent requests as a Server-id
header. Bloomreach Content will pick this header and forward the incoming request to the appropriate cluster node.
If the SPA omits the received server-id
parameter, the SPA SDK will not add a Server-id
header in the outbound request to the Delivery API and the request will be dispatched in a round-robin fashion. As a result:
- Calls that hit the cluster node aware of the user's session will succeed with a status 200 and the SPA loading fine in the Experience manager.
- Calls that hit a cluster node that doesn't hold the user's session will fail with a status 401 or 500, the SPA will fail to get a response from the Delivery API.
Solution
Always include the full requested path with all its parameters in the property request.path
of the configuration object that gets passed to the SDK.
"Mixed content" issues and/or warnings in the Experience manager
Your SPA channel in not displayed in the Experience manager and/or your browser is displaying "mixed content" warnings when viewing an SPA channel in the Experience manager. Your Bloomreach Content environment uses HTTPS but your SPA uses HTTP.
Reason
Modern browsers typically block the display of a page or display warning messages if secure content (HTTPS) is mixed with insecure content (HTTP).
This can occur in your development environment when, for example, loading an SPA channel in the Experience manager while Bloomreach Content uses HTTPS and the SPA uses HTTP.
Solution
To avoid mixed content issues while developing your SPA, make sure your SPA uses HTTPS.
HTTPS can be enabled in most frontend frameworks through a single configuration variable, see below for some popular frameworks:
- React
Please use theHTTPS=true
environment variable. See Using HTTPS in Development for details. - Angular
Please use the--ssl
flag. See ng serve for details. - Vue CLI
Please use the--https
flag. See vue-cli-service serve for details.
Although it is also possible to enable mixed content in most browsers, this workaround is not recommended.
If, after associating a local SPA using HTTPS with a development project, the Experience manager channel preview still doesn't load or shows an error, you may need to open the SPA in a separate browser tab and explicitly ignore the warning that the connection is not private and may be unsafe. Since you are in full control of the application, it is safe to ignore the warning.
Note:
Production instances should always use HTTPS!
Updated 3 months ago