配置Nginx解决：Incompatibile SockJS! Main site uses: "1.1.5", the iframe: "1.0.0"

前端使用ant-design开发，后端是由很多微服务构成，为了统一访问入口，在前端与后端之间使用了Nginx做代理。前后端直接调用服务是没有报错的，使用Nginx代理后，报sockejs的错误。错误信息：

Incompatibile SockJS! Main site uses: "1.1.5", the iframe: "1.0.0"

查了下，原因ant-design的热更新是通过websocket的，nginx需要配置对nginx的支持。

打开nginx配置文件，nginx.conf，在server节点的配置中对websocket的url做拦截，示例配置如下：

server {
	listen       80;
	server_name  example.com;
	charset utf-8;
	location /websocket/ {
	   proxy_http_version 1.1;
	   proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection "upgrade";
           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;
	}
}

关键配置：

• location /websocket/：配置拦截的websocket路径，根据请求的url前缀调整。
• proxy_http_version 1.1：websocket是在http1.1上扩展的。
• proxy_set_header Upgrade $http_upgrade 和proxy_set_header Connection "upgrade"：告诉nginx升级协议为websocket