Running into a wall with the Web Messaging SDK in a Next.js environment. We are trying to embed the standard messenger widget into our React app. The goal is to have the widget load on the homepage without breaking our SSR setup.
Here is the issue. When the page renders, the browser console throws a CORS error immediately. It looks like the initial handshake to the CXone gateway is getting blocked. The error message is pretty clear:
Access to fetch at 'https://api.cxone.com/api/v2/...' from origin 'https://our-portal.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I’ve checked the NICE documentation. It mentions that the widget should handle its own CORS headers via the internal proxy. But in Next.js, the server-side rendering seems to interfere with the client-side script injection. I’m using next/dynamic to load the component only on the client side to avoid the window is not defined error.
Here is the I’m using:
import dynamic from 'next/dynamic';
const WebMessenger = dynamic(() => import('../components/WebMessenger'), {
ssr: false,
});
export default function Home() {
return (
<div>
<h1>Welcome</h1>
<WebMessenger />
</div>
);
}
The WebMessenger component just loads the script tag from the standard CDN URL. I’ve tried adding custom headers in next.config.js using the headers function, but that didn’t help. The request never even reaches our server middleware. It fails at the network level before the SDK can initialize.
Is there a known workaround for this in Next.js? Or do I need to proxy the API calls through a custom backend endpoint to avoid the preflight check? I don’t want to maintain a proxy if I can help it. The standard embed works fine in a plain HTML file. Just not in Next.js.