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

版权声明:著作权归作者所有。

相关推荐

Nginx配置代理gRPC

Nginx 1.13.10新增了对gRPC的原生支持。本文介绍如何配置Nginx的gRPC。安装NginxNginx版本要求:1.13.10。gRPC必须使用HTTP/2传输数据,支持明文和TLS加密数据,支持流数据的交互。这是为了充分利用 HTTP/2 连接的多路复用和流式特性。所以在安装部署nginx时需要安装http/2。使用源码安装,编译时需要加入http_s

nginx配置Basic认证

最近在搭建kibana时,发现kibana是没有提供认证功能,所以想到给它加一个认证,最简单的就是basic auth认证。下面记录下nginx配置basic认证的过程。添加Basic Auth认证需要先创建密码文件,这里使用htpasswd。如果没有找到htpasswd命令,可以先安装httpd-tools。安装httpd-toolsyum install 

nginx配置gzip压缩

配置在nginx.conf的http节点,添加gzip配置如下:http {   gzip on;   gzip_min_length 1k;   gzip_buffers 4 16k;   gzip_comp_level 2;   gzip_types text/plain text/c

Nginx使用upstream配置负载均衡

nginx主要使用upstream配置多个服务器,设置负载均衡策略。基本配置upstreamupstream example.com{    server host1;    server host2;  }  serverserver {     listen 90;

配置Nginx解决Angular 4刷新路由重新加载报404错误

Angular重新加载页面会报404,原因可分为三种:1、路由不存在2、Angular使用html5模式的路由,需要把所有路由的请求映射到index.html配置Nginx如下:location / {     root /var/html;     try_files $uri $uri/ /index.html =404;   } 其

Nginx配置WebSocket

Nginx配置WebSocketserver {     listen       80;     server_name  example.com;     location&