At the time of writing these lines, whether you create a project from the XM starter kit or the XM Cloud starter kit, both are affected by the same issue: CORS errors in the browser console in the Experience Editor. This only occurs on development environments on Docker. This does not happen on hosted XM Cloud environments. This could also happen on hosted XM environments.
In this blog post, we will cover the Docker development environment scenario.
In Experience Editor, open the browser developer tools in the console tab. If you see CORS errors similar to those, you are affected by this issue:
When running the Experience Editor, the page domain is the Content Manager (CM) domain:
https://xmcloudcm.localhost/
However, the HTML in the DOM of the Experience Explorer is coming from the rendering host. The Experience Editor asks
the rendering host to return the server-side rendered (SSR) version of the page in edit mode:
https://${RENDERING_HOST}/api/editing/render
The HTML page returned by the rendering host contains many absolute URLs with the rendering host domain as the
rendering container PUBLIC_URL
environment variable is by default set to
"https://${RENDERING_HOST}"
. For the XM Cloud starter kit, it translates to
https://www.sxastarter.localhost
.
As the Experience Editor HTTP response does not specify any Access-Control HTTP headers, the requests to the absolute rendering host URLs are blocked by the browser CORS protections.
This solution consists of adding the required HTTP headers to all the responses of the rendering host Next.js application. One way to achieve that is by configuring the Traefik HTTP proxy to do it.
docker-compose.override.yml
file.rendering
service.Locate the service labels
. You will usually find these:
labels:
- "traefik.enable=true"
- "traefik.http.routers.rendering-secure.entrypoints=websecure"
- "traefik.http.routers.rendering-secure.rule=Host(`${RENDERING_HOST}`)"
- "traefik.http.routers.rendering-secure.tls=true"
Yours may be slightly different.
Add the following labels just after your last one.
# BEGIN CUSTOMIZATION - Add CORS headers to fix CORS issues in Experience Editor with Next.js 12.2 and newer
- "traefik.http.middlewares.rendering-headers.headers.accesscontrolallowmethods=GET,POST,OPTIONS"
- "traefik.http.middlewares.rendering-headers.headers.accesscontrolalloworiginlist=https://${CM_HOST}"
- "traefik.http.routers.rendering-secure.middlewares=rendering-headers"
# END CUSTOMIZATION
You will end up with the following configuration:
labels:
- "traefik.enable=true"
- "traefik.http.routers.rendering-secure.entrypoints=websecure"
- "traefik.http.routers.rendering-secure.rule=Host(`${RENDERING_HOST}`)"
- "traefik.http.routers.rendering-secure.tls=true"
# BEGIN CUSTOMIZATION - Add CORS headers to fix CORS issues in Experience Editor with Next.js 12.2 and newer
- "traefik.http.middlewares.rendering-headers.headers.accesscontrolallowmethods=GET,POST,OPTIONS"
- "traefik.http.middlewares.rendering-headers.headers.accesscontrolalloworiginlist=https://${CM_HOST}"
- "traefik.http.routers.rendering-secure.middlewares=rendering-headers"
# END CUSTOMIZATION
These labels are used by the Traefik
container to:
rendering-headers
Traefik middleware.GET,POST,OPTIONS
https://${CM_HOST}
CM_HOST
variable is usually defined in the main .env
file. xmcloudcm.localhost
. Thus, the
allowed origin becomes https://xmcloudcm.localhost
.cm.<your_project_name>.localhost
. Thus,
the allowed origin becomes https://cm.<your_project_name>.localhost
.rendering-secure
Traefik router.rendering
container by running the
docker compose up -d
command.
rendering
container logs to know when it has compiled the next.js project and it is
ready to receive requests.I hope you better understand the cause of Experience Editor CORS errors and this solution worked for your project.
Other solutions might include configuring Access-Control HTTP headers directly in the Next.js application
next.config.js
file or as a Next.js middleware.
Happy Sitecoring!