Trying to figure out the right way to embed the Genesys Cloud Messenger widget in a Next.js 14 app using the App Router. We’re running into CORS issues that shouldn’t be there if the widget is just a script tag.
Here’s the setup:
- Next.js
14.2.5 - Genesys Cloud Messenger SDK via CDN
- Running locally on
localhost:3000
The widget loads, but when a user sends a message, the browser console throws:
Access to XMLHttpRequest at 'https://api.mypurecloud.com/api/v2/conversations/messaging/contacts' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I’ve checked the Network tab. The OPTIONS preflight hits the Genesys API and returns 403 Forbidden. The request headers look standard:
Origin: http://localhost:3000
Access-Control-Request-Method: POST
We’ve whitelisted http://localhost:3000 in the Genesys Cloud Web Messaging settings under ‘Allowed Origins’. I even added a wildcard * temporarily to rule out config errors, but the 403 persists. The SDK version in the widget config is the latest stable.
Is there a specific header or init param I’m missing for the Next.js environment? Or is this a known issue with how the SDK handles preflights in SSR/CSR mixed contexts? We’ve tried disabling the Next.js headers middleware to ensure it’s not interfering, but no luck.