Mixed Content issue with ws: Asked for endpoint to be available over WSS

[jonochong]

Everything works well and dandy during dev on localhost. On the server, however, I'm getting error:

Mixed Content: The page at '' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://url.com/socket.io/?EIO=3&transport=websocket'. This request has been blocked; this endpoint must be available over WSS.

Expected behavior

Tell us what should happen
Websocket connects and works.

Actual behavior

Getting error in browser's console about insecure socket
Mixed Content: The page at '' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://url.com/socket.io/?EIO=3&transport=websocket'. This request has been blocked; this endpoint must be available over WSS.

NodeJS version:
14.17.1

Operating System:
Ubuntu

Browser Version:
Chrome
Version 91.0.4472.114

My client config is as below:

import feathers from '@feathersjs/feathers'
import socketio from '@feathersjs/socketio-client'
import auth from '@feathersjs/authentication-client'
import io from 'socket.io-client'
//To store local cookies
import { CookieStorage } from 'cookie-storage'

//API URL
export const host = 'https://***.com'

const socket = io(host, {
transports: ['websocket']
})

const storage = new CookieStorage()

const feathersClient = feathers()
.configure(socketio(socket))
.configure(auth({ storage }))

export default feathersClient

[daffl]

Your socket.io connection should use the https:// URL of the API server. This FAQ entry talks about how to set up HTTPS.