We are trying to embed the Genesys Cloud Messenger widget into a React application using Next.js 14 with the App Router. The setup works fine in development, but when we deploy to staging, the widget fails to load. The browser console shows a CORS error because the script tag is trying to fetch resources from platformapi.prod.us.genesyscloud.com.
Here is how we are injecting the script in our layout.tsx:
<script src="https://messaging-api.genesis.com/v1/widget.js" async></script>
The error message is:
Access to script at 'https://platformapi.prod.us.genesyscloud.com/v1/...' from origin 'https://staging.ourapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have checked the widget configuration in the Genesys UI and added https://staging.ourapp.com to the allowed origins list. I am also setting the origin parameter in the initialization config.
genesyscloud.messenger.init({
orgId: '123456',
origin: 'https://staging.ourapp.com'
});
Despite this, the browser still blocks the request. Is there a specific header we need to set on the Next.js server response for the widget to work? Or is this a known issue with the App Router?