Allow CORS request from CM to Rendering host

Question

Related to Missing fonts when previewing Next.js app in Experience Editor.

I've got the Rendering container with SITECORE_API_HOST set to CD. In CM Experience Editor I see some CORS errors caused by Rendering. In order to let CM access Rendering, the following configuration is added to the next.config.js:

async headers() {
  return [
    {
      source: '/_next/static/media/:path*',
      headers: [{ key: 'Access-Control-Allow-Origin', value: '*' }],
    },
  ];
}

This works but to make it more secure I'd like instead of "*" set the CM url. Doing that leads to The operation has timed out error... Rendering works fine.

What is missing here? Is it safe to leave "*" for the static files?

Answer 1

Solved adding Access-Control-Allow-Methods header:

async headers() {
  return [
    {
      source: '/_next/static/media/:path*',
      headers: [
        { key: 'Access-Control-Allow-Origin', value: 'https://cm.myapp.localhost' },
        { key: 'Access-Control-Allow-Methods', value: 'GET,OPTIONS' },
      ],
    },
  ];
},