Recently, I've been working on my first headless app with Sitecore for a customer. Specifically, Headless SXA. Everything seemed to be working nicely in my local docker containers. I was able to add components to my first page, the rendering host displayed everything as I expected - everything seemed ok. Until, that is, I opened up the chrome dev tools and saw all of these CORS-related errors in the console while using Experience Editor:

Access to fetch as `https://mysite/whatever-path` from origin `https://mysite` has been blocked by CORS policy: No `Access-Control-Allow-Origin` header is present on the requested resource.

In my API Key in /sitecore/system/Settings/Services/API Keys, I had CORS Origins and Allowed Controllers both set to *. What else was I missing?

Solution

Thanks to Jeff L'Heureux, he pointed me to a few lines he added to his traefik config for the rendering host, in his docker-compose.override.yml file:

- "traefik.http.middlewares.rendering-headers.headers.forceSTSHeader=true"
- "traefik.http.middlewares.rendering-headers.headers.stsSeconds=31536000"
- "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"

Boom! All of the CORS errors I was seeing in Experience Editor were gone! Thanks Jeff, and I hope this helps someone else! Maybe one day, this will get added to some official documentation. ;)

Happy Sitecore trails, my friend!