Trying to embed the NICE CXone Messenger widget in a Next.js app using the Guest API. The app runs on port 3000 during dev. When the component mounts, I call the SDK to initialize the chat. The browser console immediately throws a CORS error. The request to https://api.nice.com/v1/chat/sessions is blocked because the Access-Control-Allow-Origin header is missing. I’ve checked the NICE CXone docs and they mention setting a whitelist for the origin. I’ve added http://localhost:3000 to the allowed origins in the CXone UI. Still getting the same error. The network tab shows the preflight OPTIONS request returning 403 Forbidden.
I’ve tried adding the withCredentials flag in the fetch call, but that doesn’t change anything. The error persists. I’m using the standard niceCxoneGuestApi package. Here’s the init code:
const initChat = async () => {
const response = await fetch('https://api.nice.com/v1/chat/sessions', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ channel: 'web' })
});
return response.json();
};
The issue seems to be specific to the Next.js environment. The same code works fine in a plain HTML file served by a local server. What am I missing in the Next.js config or the NICE CXone setup?