Hey everyone,
I’m trying to embed the Genesys Cloud Messenger widget into a Next.js 14 application using the App Router. The goal is to track chat interactions for our WFM adherence reports, but I’m hitting a wall with CORS errors when the widget tries to initialize.
Here is the basic setup in my layout.tsx:
'use client';
import { useEffect } from 'react';
export default function RootLayout({ children }) {
useEffect(() => {
// Load the Genesys Cloud script
const script = document.createElement('script');
script.src = 'https://www.genesiscloud.com/messenger/...';
script.async = true;
document.body.appendChild(script);
}, []);
return (
<html>
<body>{children}</body>
</html>
);
}
When the page loads, the browser console throws this error:
Access to script at 'https://www.genesiscloud.com/messenger/...' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I’ve checked the allowed domains in the Genesys Cloud web messaging settings, and http://localhost:3000 is listed there. I’m running this in US/Central time, so maybe there’s a cache issue? Or is Next.js doing something weird with the request headers?
I’ve tried adding Access-Control-Allow-Origin to my own server headers in next.config.js, but that doesn’t seem to help because the request is coming from the client side. The widget just doesn’t show up. The error persists even after clearing the cache.
Is there a specific configuration I’m missing for Next.js? Or is this a known issue with the App Router? I’m a bit stuck on this one. Any help would be appreciated.