Next.js App Router CORS preflight failing on Genesys Messenger init

We’re trying to embed the Genesys Cloud Messenger widget in a Next.js 14 app using the App Router. It works fine in dev mode, but as soon as we deploy to Vercel, the initial config fetch fails with a CORS error.

The error is:

Access to fetch at ‘https://api.mypurecloud.com/api/v2/messenger/config’ from origin ‘https://our-app.vercel.app’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

We’ve added https://our-app.vercel.app to the Allowed Origins list in the Genesys Cloud Messenger settings. Double-checked for typos. Even added a wildcard * just to test, and it still fails.

Here’s the init code in our layout.tsx:

useEffect(() => {
 if (typeof window !== 'undefined') {
 window.initMessenger = (function () {
 var messenger = window.messenger || {};
 messenger.fetchConfig = function () {
 return fetch('https://api.mypurecloud.com/api/v2/messenger/config', {
 method: 'GET',
 headers: {
 'Content-Type': 'application/json',
 },
 }).then((res) => res.json());
 };
 return messenger;
 })();
 }
}, []);

I’ve tried adding a Next.js middleware to rewrite the request, but that feels like a hack. The SDK should handle this, or Genesys should allow the origin. Is there a specific header we’re missing? Or is the Next.js build stripping something out?

Timezone is Sydney, so if anyone’s awake, thanks.

The App Router handles requests server-side, so you can’t just rely on client-side headers. Create a /api/messenger/config route in Next.js to xy the request to api.mypurecloud.com. Your frontend then calls your own endpoint, bypassing the CORS issue entirely.