升级到https， websocket失效的解决方法

公司升级了https，导致前端访问一个三方应用的一个websocket接口被拦截了
报错信息如下：
Mixed Content: The page at ‘https://xxx.com/xxxxxxxxx?aaa=111&bbb=222’ was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint ‘ws://10.xxxx:8080/websocket’. This request has been blocked; this endpoint must be available over WSS.

检查一番发现目前正在使用的是一个apache httpd的服务器，来做为网关代理转发
所以只要修改一下配置文件，重启即可

前提！！！需要ssl配置过

进入配置文件

cat /etc/httpd/conf/httpd.conf

vim /etc/httpd/conf/httpd.conf

# 引入mod_proxy_wstunnel.so模块，使其可以解析ws、wss协议
LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so

# websocket
ProxyPass /websocket  ws://10.xxx.xxx.01:8099/websocket
ProxyPassReverse /websocket  ws://10.xxx.xxx.01:8099/websocket

# 重启服务器
service httpd restart

# 检查一下是否成功启动
 ps -ef|grep httpd
 

前端通过websocket页面发起代理请求

socket = new WebSocket("wss://服务器域名/websocket");

查看10.xxx.xxx.01的访问日志

成功访问

如果用的是nginx， 方式差不多

   
# http下增加
map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }

# websocket路径：ws://10.xxx.xxx.01:8099/websocket
# 注意，前端是ws://10.xxx.xxx.01:8099/websocket ,这里拦截/websocket
# 注意，前端是ws://10.xxx.xxx.01:8099/websocket/ ,这里拦截/websocket/
      location /websocket {
          proxy_pass http://10.xxx.xxx.01:8099;
          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_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection $connection_upgrade;
      }

# 重启nginx
nginx -s reload