https协议下配置websocket问题(踩坑)

目录

场景:

 本地环境

本地环境前端:

本地环境后端

现场环境:

nginx配置

问题一:

原因:https协议下不能使用ws去访问

问题二:改用wss建立连接后提示连接失败

正确的配置

理论知识

场景:

在本地开发环境中一直使用的是windows+http+websocket,本地测试都是正常的,但是部署到线上时使用的是https,导致websocket一直连接失败

 本地环境

本地环境前端:

ws://ip.端口/GisqPlatformExplorer/ws/login.do

其中loginWebSocketUrl=ws://192.168.xx.xx:8082

本地环境后端

原理就是:当我websocket访问路径含有/ws/login.do时,会对该访问进行loginwebsocketHandler处理。我这里功能主要是访问该路径时,记录用户登录登出日志的功能(前面博客有写过)。

现场线上环境:

linux+https+nginx+websocket

nginx配置


worker_processes  1;
events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;
    client_max_body_size   1024M;

    #gzip  on;

    server {
        listen       11921 ssl;
        server_name  localhost;
		
		ssl_certificate			.\ssl\8872433_xxx.cn.pem;
		ssl_certificate_key		.\ssl\8872433_xxx.cn.key; 
		ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;
		
      location /GisqPlatformExplorer/ws/login.do {
        proxy_pass http://xx.xx.xx.xx:8081;
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "Upgrade";
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Real-IP $remote_addr;  
    }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

    # HTTPS server
    server {
        listen       443 ssl;
        server_name  localhost;

        ssl_certificate      ssl/cert.crt;
        ssl_certificate_key  ssl/cert.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location / {
            root   html;
            index  index.html index.htm;
        }
        location /GisqPlatformExplorer/ {
            proxy_pass http://localhost:8081;
        }
    }
}

问题一:

Uncaught DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS

原因:https协议下不能使用ws去访问

解决方案:改成wss://xx.xx.xx.xx:11921/GisqPlatformExplorer/ws/login.do与websocket建立连接

问题二:改用wss建立连接后提示连接失败

WebSocket connection to 'wss://xx.xx.xx.xxx:11921/GisqPlatformExplorer/ws/login.do' failed 

 有两个地方要注意:

一个是域名问题:使用wss时必须要使用域名去访问。

一个是nginx配置问题:   ‘

错误的配置:

原因主要是加“/”与不加“/”的区别没有搞清楚:nginx中斜杠(/)详解,配置location、proxy_pass时,加“/”与不加“/”的区别

参考:nginx中斜杠(/)详解_nginx_脚本之家

          Nginx中proxy_pass的斜杠(/)问题 - 达摩院的BLOG - 博客园

 
    location /GisqPlatformExplorer/ws/login.do {
        proxy_pass http://xx.xx.xx.xx:8081/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;  
}


实际访问代理地址:http://xx.xx.xx.xx7:8081/

正确的配置

  location /GisqPlatformExplorer/ws/login.do {
        proxy_pass http://127.0.0.1:8081/GisqPlatformExplorer/ws/login.do;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;  
}

实际访问代理地址:http://127.0.0.1:8899/GisqPlatformExplorer/ws/login.do

    location /GisqPlatformExplorer/ws/login.do {
        proxy_pass http://127.0.0.1:8081;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;  
}

实际访问代理地址:http://127.0.0.1:8081/GisqPlatformExplorer/ws/login.do

再次测试访问wss://xx.xx.xx.xxx:11921/GisqPlatformExplorer/ws/login.do路径时建立连接成功。

理论知识

(不了解必定会踩坑)

1.http情况下用ws,https情况下必须要使用wss

https相当于使用http+ssl认证,使用https时websocket访问(比如建立链接时)必须要使用wss

2. 使用域名

https下一般都是域名去访问的,存在有域名解析的过程,因此wss时也要使用域名

3.使用域名+指定端口

这个之前没有了解过,只是认为域名就包含了端口,其实也是可以指定端口的下面是现场环境访问的路径

nginx斜杠问题:

参考如下写的不错,很容易理解

Nginx中proxy_pass的斜杠(/)问题 - 达摩院的BLOG - 博客园

location /api1/ {
    proxy_pass http://localhost:8080;
}

在访问http://localhost/api1/xxx时,会代理到http://localhost:8080/api1/xxx

location /api2/ {
    proxy_pass http://localhost:8080/;
}

当访问http://localhost/api2/xxx时,http://localhost/api2/(注意最后的/)被替换成了http://localhost:8080/,然后再加上剩下的xxx,于是变成了http://localhost:8080/xxx。

主要看proxy_pass http://localhost:8080,这种方式称为不带URI方式;

proxy_pass http://localhost:8080/xx或http://localhost:8080/,这种方式称为带URI方式;

其中不带URI方式主要是匹配(保留匹配路径及后面的所有),而带URI方式主要是替换(将匹配到的相同部分替换掉,然后保留完全匹配后面的所有)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值