We are trying to embed the Genesys Cloud Messenger widget into our custom agent desktop wrapper, which is built using React and Next.js. The goal is to have the chat interface appear directly within the agent’s workflow view instead of as a separate browser tab. However, we are running into persistent CORS errors when the application runs in development mode with Server-Side Rendering (SSR) enabled.
The error occurs specifically when the widget script attempts to initialize and make the initial handshake request to the api.mypurecloud.com endpoint. The browser console throws a NetworkError: CORS policy block because the preflight request is failing. This seems to happen because Next.js handles requests differently than a standard static HTML page, and the headers aren’t being passed through correctly during the server render phase.
Here is the basic setup we have in our _app.js component:
import Script from 'next/script'
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Script
src="https://api.mypurecloud.com/api/v2/outbound/messenger/widget.js"
strategy="afterInteractive"
/>
</>
)
}
And the initialization code in our main page component:
useEffect(() => {
if (window.PureCloud) {
window.PureCloud.messenger.init({
appId: 'our-app-id',
// other config
})
}
}, [])
The error message in the console looks like this:
Access to script at 'https://api.mypurecloud.com/api/v2/outbound/messenger/widget.js' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
We’ve tried adding custom headers in our next.config.js file, but it doesn’t seem to help because the request originates from the client-side script, not from our Next.js server proxy. We also checked if this is an issue with the next/script component strategy, but changing it to beforeInteractive or lazyOnload does not resolve the underlying CORS block.
Is there a specific configuration required for the Messenger widget to work within a Next.js environment? We need to know if we have to set up a middleware proxy to bypass this or if there is a header we are missing in the widget initialization payload.
We are using Node.js 18 and Next.js 13. The widget works fine in a plain HTML file, so it’s definitely something about how Next.js handles the script injection or the request context.