CORS Error in XM Cloud Experience Editor
I recently ran into an issue with static files, such as fonts or .json
files, not loading in the Experience Editor, with this error:
Access to font at 'https://www.sxastarter.localhost/_next/static/media/Inter-Regular.20c6d49c.ttf' from origin 'https://xmcloudcm.localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Initially I stumbled upon this Byteium post, but the solution did not change anything, so I continued searching. I came to realize that, since my XM Cloud project was using Next.js, I could just put code such as the below into my next.config.js
:
async headers() {
return [
{
source: '/_next/:path*',
headers: [{ key: 'Access-Control-Allow-Origin', value: 'https://xmcloudcm.localhost' }],
},
];
},
Unfortunately, when I checked the Network tab for the font that wasn't loading, I did not see Access-Control-Allow-Origin
in the response headers.
Cause
My team's XM Cloud project (and I shall assume many others) has the i18n feature of Next.js enabled in the next.config.js
file. Something I learned today is that Next automatically prefixes your configured locale to all headers you add. Our project had this config:
// next.config.js
i18n: {
// These are all the locales you want to support in your application.
// These should generally match (or at least be a subset of) those in Sitecore.
locales: ['en'],
...
}
So my header was only applied to any paths matching /en/_next/:path*
- not what I want.
Solution
The solve in our case was to add locale: false
to our header properties, like so:
{
source: '/_next/:path*',
locale: false,
headers: [{ key: 'Access-Control-Allow-Origin', value: 'https://xmcloudcm.localhost' }],
},
This is specifically needed because our project is using the i18n feature of Next.js. Next.js documentation: Headers with i18n support
After making this change, all I had to do was reload the Experience Editor (a couple times), and I did not see the CORS errors in the console anymore. Hope this also helps you.