配置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