Embedding the CXone Web Messenger SDK into a Next.js 14 app (App Router). The widget loads fine in dev mode, but in production behind a custom domain, the initial handshake to https://platform.niceincontact.com throws a CORS error. Browser console shows:
Access to fetch at 'https://platform.niceincontact.com/api/v2/...' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I’ve set up a Next.js middleware to proxy the request, but the SDK client seems to be making direct XHR calls that bypass my proxy. Here’s the relevant setup:
// next.config.js
async rewrites() {
return [
{
source: '/api/cxone/:path*',
destination: 'https://platform.niceincontact.com/:path*',
},
];
}
And the initialization:
import { WebMessenger } from '@nice-digital/web-messenger';
useEffect(() => {
const messenger = new WebMessenger({
accountId: '123456',
widgetId: 'abc-xyz',
// Attempted to override origin, but SDK doesn't seem to expose this
});
messenger.start();
}, []);
Is there a way to configure the SDK to use a custom base URL or proxy endpoint? Or am I stuck with a server-side reverse proxy for the entire domain? The docs are silent on CORS handling for custom origins.