Problem with websocket ping in React

I’m working on a Zoom app use websockets to measure ping. Before it starts to ping, I need to make an http request to find the closest server. For some reason the websocket fails to connect when the app runs in Zoom, but it works fine in the browser. However, if I hardcode the endpoint instead of making the http request, it works fine in Zoom as well. I extracted the relevant parts of the code here: Vitejs - Vite (forked) - StackBlitz

Can you share any errors that you are seeing in the development console?

This is likely happening because the CSP header is not set or does not include a connect-src field that allows the WSS origin that you provide.

You’ll want to set these headers differently depending on if you are in development or production. In the serverless example app that I created, we use the vite.config.js file to set headers in development.

Then, for production, I use firebase config to set the hosting headers:

As you can see, this allows us to have more open CSP headers for development and more useful and restrictive headers for production.

I hope that helps!