reactjs - Error during WebSocket handshake using Nginx reverse-proxy and React app

Question

I've set up a Nginx Reverse Proxy that serves the backend api at /api, which is fine. But when Im trying to serve the frontend based on a create-react-app on port 3000, I get an issue with the WebSocket handshake and the development server disconnects. This is the error msg:

WebSocket connection to 'wss://localhost/sockjs-node' failed: Error during WebSocket handshake: Unexpected response code: 301

Here is my nginx setup.

94     server {
 95         listen 443 ssl http2;
 99         
100         ssl_certificate         cert.crt;
101         ssl_certificate_key     cert.key;
102 
103         ssl_session_cache  builtin:1000  shared:SSL:10m;
104         ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
105         ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
106         ssl_prefer_server_ciphers on;
107 
108 
109 
114         location / {
115                 proxy_pass http://localhost:3000;
116                 proxy_set_header Host $host;
117                 proxy_http_version 1.1;
118                 proxy_set_header   Upgrade $http_upgrade;
119                 proxy_set_header   Connection "upgrade";
120                 proxy_set_header   X-Forwarded-For $remote_addr;
121         }
122 
123         location /api {
124                 proxy_pass https://localhost:8443;
125                 proxy_set_header Connection "upgrade";
126                 proxy_set_header Host $host;
127         }

But no sigar. Where is the issue in this setup?

question from:https://stackoverflow.com/questions/66047643/error-during-websocket-handshake-using-nginx-reverse-proxy-and-react-app

Answer 1

Waitting for answers