(yet another CORS noob not knowing what to do 😉 )

My vercel/nextjs app is happily working. But I am trying to get Pusher working as a "serverless" websocket so (pusher-js) clients can receive notifications from the backend (hosted in AWS).

When the frontend attempts to connect to Pusher I am getting:

WebSocket connection to 'wss://ws-.pusher.com/...' failed:

And then when pusher client attempts long-polling I get:

Access to XMLHttpRequest at 'https://sockjs.pusher.com/pusher/app...' 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.

My next.config.mjs has this in it:
async headers() {
return [
{
source: '/',
headers: [
{ key: 'Access-Control-Allow-Credentials', value: 'true' },
{
key: 'Access-Control-Allow-Origin',
value: 'ws-.pusher.com,sockjs.pusher.com',
},
{
key: 'Access-Control-Allow-Methods',
value: 'GET,DELETE,PATCH,POST,PUT',
},
{
key: 'Access-Control-Allow-Headers',
value:
'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version',
},
],
},
];
},

I'm hoping to use the pusher-js client without trying to create api proxies or anything. Plain vanillla pusher-js. I'm pretty sure my problem is that I don't know how to properly configure CORS in next.config.mjs. Any help is greatly appreciated.