How to connect to a backend secure socket server from a react front end running https?

Posted August 16, 2020 1.2k views

When upgrading my front end react app to https using nginx, the backend socket server stopped working. The original call to the back end was done via W3CWebSocket(ws://x.x.x.x:xxxx) in react.

I added an additional location section in nginx:

          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection 'upgrade';

However, upgrading the front end to https and changing to wss on the call to the server, I keep getting error messages about the certificates I loaded to the backend.

WebSocket connection to 'wss://' failed: Error in connection establishment: net::ERR_CERT_COMMON_NAME_INVALID

thread 'main' panicked at 'accept error: Ssl(Error { code: ErrorCode(1), cause: Some(Ssl(ErrorStack([Error { code: 336151574, library: "SSL routines", function: "ssl3_read_bytes", reason: "sslv3 alert certificate unknown", file: "../ssl/record/rec_layer_s3.c", line: 1528, data: "SSL alert number 46" }]))) }, X509VerifyResult { code: 0, error: "ok" })', tokio-native-tls/examples/

The secure socket server is a rust tokio app and runs under pm2. I tried converting the certificates I used for the front end into p12 format, but cannot get past the connection handshake.

Do I need another set of certificates? I tried that, but letsencrypt asked me if I just wanted to upgrade the ones I already use in nginx.

How to I supply the backend with the correct certificates?

Any help will be appreciated!

edited by bobbyiliev
Submit an answer

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!