https协议下配置websocket问题（踩坑）

场景：

在本地开发环境中一直使用的是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

1. 使用域名

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方式主要是替换（将匹配到的相同部分替换掉，然后保留完全匹配后面的所有）