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

前后端分离架构，开发环境正常，部署到线上报错如下：

websocket报错：WebSocket failed: Error during WebSocket handshake: Unexpected response code: 400

很明显会联想到是nginx的配置不支持websocket的反向代理，故搜寻以及排障结果如下：

其中最重要的是这三行

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
1
2
3

• 第一行是告诉nginx使用HTTP/1.1通信协议，这是websoket必须要使用的协议。

• 第二行和第三行告诉nginx，当它想要使用WebSocket时，响应http升级请求。

• 这里http和websocket反向代理共存，只是个协议的升级

补充：

	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;
	        }
	 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25