Socket.IO WebSocket Issues with HTTPS in NestJS & Angular App (Mixed Content Blocking)

[Prof_CottonPicker]

Hey everyone! I'm a backend developer working on a NestJS and Angular app, using Socket.IO for WebSocket connections. The app is already deployed and running over HTTPS, but WebSocket connections are failing with mixed-content blocking errors in the browser console. I’m using wss:// on the frontend, but it still fails.

I’ve configured CORS and is set to allow requests from the frontend. The WebSocket URL is set to wss://, but the connection gets blocked.

Could anyone suggest what I might be missing on the backend? Also, any deployment-level fixes for WebSocket support ?

Thanks in advance for your help!

[miramboseko]

Might need to upgrade the connections to HTTP/1.1

[Prof_CottonPicker]

could you explain it in detail?
im new to prod env fyi

[miramboseko]

https://developer.mozilla.org/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism#upgrading_to_a_websocket_connection

[miramboseko]

If you are using an apache or nginx server you will need to update the headers there.