Embedding the Genesys Cloud messenger widget in a Next.js app triggers a CORS error on the /api/v2/organizations call. The widget loads, but the handshake fails with 403 Forbidden due to missing Origin headers in the preflight request.
Access to XMLHttpRequest at 'https://api.mypurecloud.com/api/v2/organizations' from origin 'http://localhost:3000' has been blocked by CORS policy
We’re using server-side rendering. Does the widget require specific Next.js middleware to handle the OPTIONS request, or is this a configuration issue in the Genesys Cloud integration settings?
It’s almost certainly not a CORS issue on the Genesys side. The platform handles preflight requests correctly for all registered origins. If you’re seeing a 403 with a missing Origin header, your Next.js server-side logic is likely stripping it out before the request hits the network.
Check your middleware or API routes. If you’re proxying requests, make sure you’re passing the Origin header through explicitly. Also, verify that http://localhost:3000 is actually added to your Genesys Cloud tenant under Admin > Security > Allowed Origins. Without that whitelist entry, the platform rejects the request regardless of headers.
Here’s a quick check for your Next.js API route if you’re proxying:
// pages/api/proxy.js
export default async function handler(req, res) {
const origin = req.headers.origin;
if (!origin || !origin.includes('localhost')) {
return res.status(403).send('Blocked');
}
// Forward the request with the original Origin header
const response = await fetch('https://api.mypurecloud.com/api/v2/organizations', {
headers: {
'Origin': origin,
'Authorization': `Bearer ${req.headers.authorization}`
}
});
return res.status(response.status).json(await response.json());
}
Double check the Allowed Origins list in the admin portal. That’s usually the culprit.