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.