CORS 403 on Messenger widget init in Next.js App Router

NICE CXone API & Integrations
1

We’re embedding the Genesys Cloud Messenger widget into a React Next.js app using the App Router. The goal is a smooth guest experience.

The widget loads fine in development with next dev. It works. In production, however, the initial handshake fails. The browser console shows a 403 Forbidden error on the https://api.mypurecloud.com/api/v2/... endpoint.

Here’s the setup. We use the standard embed script.

const initMessenger = () => {
 window.purecloudEmbedConfig = {
 deploymentId: "abc-123",
 locale: "en-us"
 };
 const script = document.createElement('script');
 script.src = "https://webchat.pure.cloud/embed.js";
 script.onload = () => {
 window.initMessenger();
 };
 document.body.appendChild(script);
};

The error payload from the network tab looks like this:

{
 "errors": [
 {
 "code": "bad_request",
 "message": "Origin not allowed"
 }
 ]
}

We’ve added the Next.js domain to the allowed origins in the Genesys Cloud admin UI. We’ve waited 24 hours. The error persists.

Is there a specific header the Next.js server needs to send? Or is the embed.js making a request that bypasses our configured origin list? We’re stuck on this CORS issue.

2
  • check your production env vars. the genesysCloudOrgId and genesysCloudRegion need to match exactly.
  • verify the widget config includes genesysCloudUrl: 'https://api.mypurecloud.com'.
  • ensure the Next.js next.config.js rewrites allow the websocket connection. cors isn’t the issue here. it’s likely a misconfigured origin header in the prod build.