Next.js SSR blocking CXone Messenger Guest API CORS

NICE CXone API & Integrations
1

Embedding the NICE CXone Messenger widget in a Next.js app. Running dev on port 3000. The component mounts, calls the SDK to init chat. Browser console throws CORS error immediately.

GET request to https://api.nice.incontact.com/guest/v1/conversations fails. Network tab shows Refused to get header 'Authorization' due to CORS policy. The origin http://localhost:3000 isn’t allowed.

We’ve checked the CXone admin console. Added http://localhost:3000 to the allowed origins list under the Messenger settings. Cleared cache. Still broken.

Here is the init code:

useEffect(() => {
 const script = document.createElement('script');
 script.src = 'https://cdn.nice.incontact.com/messenger/sdk/latest/sdk.js';
 document.head.appendChild(script);
 
 window.niceCXoneMessenger.init({
 accountId: '12345',
 widgetId: 'abc-def',
 guestToken: token // from server
 });
}, []);

Tried:

  • Verified origin in CXone admin matches exactly.
  • Added Access-Control-Allow-Origin header in Next.js middleware (didn’t help, request never reaches server).
  • Checked if Guest API supports preflight OPTIONS correctly.

The error persists. Is there a specific header missing in the SDK init? Or does the widget handle CORS differently than raw API calls? Looking at the network trace, the OPTIONS request returns 403. Not sure where to go from here.