WebSocket failed: Error during WebSocket handshake: Unexpected response code: 400

The front-end and back-end architecture are separated, the development environment is normal, and the errors reported when deploying to the line are as follows:

Websocket error: websocket failed: error during websocket Handshake: unexpected response code: 400

It is obvious that the configuration of nginx does not support the reverse proxy of websocket, so the search and troubleshooting results are as follows:

The most important of them are the three lines

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

The first line tells nginx to use HTTP/1.1 communication protocol, which websoket must use. The second and third lines tell nginx to respond to the HTTP upgrade request when it wants to use websocket. Here, HTTP and websocket reverse proxy coexist, just a protocol upgrade

Supplement:

	server {
	        listen       80;
	        server_name  school.godotdotdot.com;
	        charset utf-8;
	        
			proxy_http_version 1.1; 
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection "upgrade";
	

	        location/{
	            proxy_pass http://127.0.0.1:3000;
	            proxy_set_header Host $host;
	            proxy_set_header X-Real-IP $remote_addr;
	            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	            proxy_connect_timeout 60;
	           proxy_read_timeout 600;
	           proxy_send_timeout 600;
	        }

	        error_page   500 502 503 504  /50x.html;
	        location = /50x.html {
	            root   html;
	        }
	 }

Read More: