Trying to drop the Genesys Cloud messenger widget into a Next.js 14 project using the App Router. The script loads fine in development, but as soon as I hit the staging environment, the browser console is flooded with CORS errors. The widget script is trying to fetch https://webchat.coe.iron.io/api/v2/webchat/session and getting blocked by the browser because the Origin header isn’t matching up. I’ve checked the allowed origins in the Genesys admin UI and added our staging domain, but it’s still failing. The error message in the console is pretty vague, just saying “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”
Here’s the setup:
- Next.js 14.2 with App Router
- Genesys Cloud Web Messaging SDK v1.2.0
- Staging domain is
app.stage.example.com - Added
https://app.stage.example.comto the allowed origins in Genesys admin - Tried setting
next.config.jsheaders to allow the origin, but that doesn’t seem to help with the widget’s internal fetch calls
The widget renders, but the chat window stays blank. I can see the script tag in the DOM, but the initialization fails. Has anyone else hit this with Next.js? I’m starting to think it’s a SSR issue where the widget tries to run on the server and fails, but I’ve wrapped it in a useEffect to ensure it only runs on the client. Still getting the same CORS block.