NextJS headers in JSS 21.5 are not applied

[larserhardsen]

Describe the Bug

We recently upgraded from JSS 21.2.2 to 21.5 and now CORS headers are no longer applied.
I have found the culprit, it seems to be caused by NextJS version 13.4.16, and by downgrading to 13.4.12, the headers work as expected.

To Reproduce

Test a JSS site utilizing Google local fonts in Pages and see CORS related errors on static font files

Expected Behavior

We have added Access-Control-Allow-Origin like this:

/**
 * @param {import('next').NextConfig} nextConfig
 */
const corsHeaderPlugin = (nextConfig = {}) => {
  return Object.assign({}, nextConfig, {
    async headers() {
      return [
        {
          source: '/_next/:path*',
          headers: [
            { key: 'Access-Control-Allow-Origin', value: config.sitecoreApiHost },
            { key: 'Access-Control-Allow-Methods', value: 'GET,OPTIONS' },
          ],
        },
      ];
    },
  });
};

module.exports = corsHeaderPlugin;

With NextJS 21.5, the headers are not added

Possible Fix

A possible fix is to downgrade NextJS 13.4.12

Provide environment information

• Sitecore Version: XM Cloud
• JSS Version: 21.5
• Browser Name and version: Chrome 120
• Operating System and version (desktop or mobile): Windows 11
• Link to your project (if available):

[illiakovalenko]

@larserhardsen Closing this ticket

• Fix was provided by a different team by updating Cloudflare which is not directly related to JSS.
• The remaining issue is with Vercel which is out of the control of the JSS team and Sitecore.

[mg-aceik]

Just linking to the nextjs ticket for next time I search for this. vercel/next.js#59813