CORS nightmare with Genesys Messenger in Next.js SSR

Hey folks, running into a weird CORS block trying to embed the Genesys Messenger widget in a Next.js app. We’re using the genesys-cloud-messenger-react package, but it’s failing hard on the server side.

Here’s the setup:

import { GenesysCloudMessenger } from '@genesyscloud/messenger-react';

export default function ChatWidget() {
 return (
 <GenesysCloudMessenger
 orgId={process.env.NEXT_PUBLIC_GENESYS_ORG_ID}
 deploymentId={process.env.NEXT_PUBLIC_DEPLOYMENT_ID}
 />
 );
}

The error is Access to fetch at 'https://api.mypurecloud.com/api/v2/conversations/webmessaging' from origin 'http://localhost:3000' has been blocked by CORS policy.

I’ve checked the Genesys console and added http://localhost:3000 to the allowed origins for the web messaging deployment. The client-side hydration works fine, but the initial SSR render tries to fetch the config and chokes. It seems like the server is making the request without the right headers, or maybe the SDK isn’t handling the SSR context correctly.

Has anyone got a workaround for this? We’re stuck on Next.js 13 with App Router. Not sure if we need to proxy the request or if there’s a flag to disable the server-side fetch.

You’re hitting the classic SSR wall. The messenger widget relies on browser-only APIs (window, document) which simply don’t exist during server-side rendering. Next.js tries to render the component on the server, fails, and throws. It’s not really a CORS issue, it’s a hydration mismatch.

You need to dynamically import the component with ssr: false. This tells Next.js to skip the server render for this specific part and only load it in the browser.

Here’s how you structure it:

import dynamic from 'next/dynamic';

// Dynamically import the messenger component with no SSR
const GenesysCloudMessenger = dynamic(
 () => import('@genesyscloud/messenger-react').then(mod => mod.GenesysCloudMessenger),
 { ssr: false }
);

export default function ChatWidget() {
 return (
 <GenesysCloudMessenger
 orgId={process.env.NEXT_PUBLIC_GENESYS_ORG_ID}
 deploymentId={process.env.NEXT_PUBLIC_GENESYS_DEPLOYMENT_ID}
 />
 );
}

This keeps the server bundle clean and lets the client handle the heavy lifting. If you’re still seeing network errors after this, check your allowed origins in the Genesys admin console.