CORS Error Loading Messenger Widget in Next.js App Router

NICE CXone API & Integrations
1

Hey everyone,

We’re running into a wall trying to embed the Genesys Cloud Messenger widget in a React app using the Next.js App Router. The widget loads fine in a plain Create React App setup, but as soon as we move it to App Router with server components and client-side hydration, we start getting CORS errors when the widget tries to fetch the configuration.

The error is:

Access to XMLHttpRequest at 'https://api.mypurecloud.com/api/v2/messaging/webmessaging/configuration' 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 added the origin to the allowed origins in the Genesys Cloud web messaging settings, and we’ve set up a Next.js middleware to proxy the request, but it’s still failing. Here’s the relevant part of our Next.js config:

// next.config.js
module.exports = {
 async rewrites() {
 return [
 {
 source: '/api/messaging/:path*',
 destination: 'https://api.mypurecloud.com/api/v2/messaging/:path*',
 },
 ];
 },
};

And here’s how we’re initializing the widget in our client component:

'use client';

import { useEffect } from 'react';

export default function MessengerWidget() {
 useEffect(() => {
 const script = document.createElement('script');
 script.src = 'https://static.mygenie.com/messenger/1.0.0/messenger.js';
 script.async = true;
 script.onload = () => {
 window.GenesysCloudMessenger.init({
 organizationId: 'our-org-id',
 deploymentId: 'our-deployment-id',
 config: {
 apiBase: '/api/messaging',
 },
 });
 };
 document.body.appendChild(script);
 }, []);

 return null;
}

The issue seems to be that the widget is still trying to hit the Genesys Cloud API directly instead of our proxied endpoint. We’ve tried setting the apiBase config option, but it doesn’t seem to be respected. Has anyone else run into this? Are we missing something in the widget configuration?

Thanks in advance for any help.

2

Cause: Next.js App Router intercepts outbound requests, breaking the widget’s direct browser calls.

Solution: Add the Genesys endpoints to next.config.js rewrites to bypass the proxy.

async rewrites() {
 return [
 { source: '/api/v2/:path*', destination: 'https://api.mypurecloud.com/api/v2/:path*' }
 ];
}

Check your next.config.js setup.

3

Rewrites are messy for this. Just inject the script tag directly in your layout or page component. Bypasses the proxy entirely.

<script src="https://api.mypurecloud.com/api/v2/messaging/widget.js" async></script>

Make sure you’re not blocking it in middleware.