Experience Editor _devMiddlewareManifest.json CORS issue

[coreyasmith]

Describe the Bug

The following error is shown in the browser console in the Experience Editor:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/_next/static/development/_devMiddlewareManifest.json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

To Reproduce

1. Install a new instance of Sitecore 10.3 (XP) in IIS.
2. Create a new JSS Next.js application.
3. Import JSS Styleguide into Sitecore 10.3 instance.
4. Open Experience Editor.
5. Open console and observe error.

Expected Behavior

No CORS errors are thrown in Experience Editor with a fresh install.

Possible Fix

Add the following to nextConfig in next.config.js:

async headers() {
  return [
    {
      source: "/_next/:path*",
      headers: [
        { key: "Access-Control-Allow-Origin", value: "https://sc1030.sc" },
      ],
    },
  ]
},

Replacing sc1030.sc with the CM hostname.

Provide environment information

• Sitecore Version: 10.3 with Sitecore Headless Services Server XP 21.0.587
• JSS Version: 21.1.5
• Browser Name and version: Firefox, 113.0.1
• Operating System and version (desktop or mobile): Windows 11
• Link to your project (if available):

[ambrauer]

@coreyasmith Thanks for the detailed information. We've actually got this in our backlog already to fix in a future release. I've added your details to the ticket as well.

[stale[bot]]

This has been automatically marked as stale because it has not had recent activity. It will be closed if there is no further activity within 30 days. You may add comments or the 'keep' label to prevent it from closing. Thank you for your contributions.