问题描述:
HTTPS 下发起WS连接,连接失败,Chrom 浏览器报错。
socket.js:19 Mixed Content: The page at 'https://app.XXX.com' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://172.16.10.80:9035/websocket/416377519315353600'. This request has been blocked; this endpoint must be available over WSS.
问题排查:
HTTPS 连接下浏览器不允许WS协议,只允许WSS协议
问题解决:
(1)确定后端接口提供ws 能力
WS 在线测试工具:http://wstool.jackxiang.com/
- ws://172.16.10.80:9035/websocket/
确定接口能提供ws 的能力
(2)、nginx 配置websocket代理【客户端不直连websocket接口】
#全局配置
.............
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
.....................
server {
listen 443 ssl;
server_name app.XXX.com;
ssl_certificate /home/application/nginx/cert/XXX.com/XXX.com.crt;
ssl_certificate_key /home/application/nginx/cert/XXX.com/XXX.link.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
gzip_buffers 4 16k;
location ^~/websocket {
rewrite ^/websocket/(.*)$ /$1 break;
proxy_pass http://172.16.10.80:9035;
proxy_read_timeout 300s;
proxy_send_timeout 300s;
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;
}
...................
}
- rewrite 地址重写
- proxt_http_version 1.1 表示反向代理发送的HTTP协议的版本是1.1,HTTP1.1支持长连接
- proxy_pass http://172.16.10.80:9035 表示反向代理的uri, 如果多个地址可使用负载均衡变量表示
- proxy_set_header Host 表 示 传 递 时 请 求 头 不 变 ,
h o s t ; 表 示 传 递 时 请 求 头 不 变 ,
host是nginx内置变量,表示的是当前的请求头,proxy_set_header表示设置请求头
- proxy_set_header X-Real-IP $remote_addr; 表示传递时来源的ip还是现在的客户端的ip
- proxy_read_timeout 300s; 表示两次请求之间的间隔超过 300s 后才关闭这个连接,默认的60s,自动关闭的元凶
- proxy_send_timeout 300s; 指定设置了发送请求给upstream服务器的超时时间。超时设置不是为了整个发送期间,而是在两次write操作期间。如果超时后,upstream没有收到 新的数据,Nginx会关闭连接,默认的60s
- proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 表示X-Forwarded-For头不发生改变
- proxy_set_header Upgrade $http_upgrade; 表示设置Upgrade不变
- proxy_set_header Connection 表 示 如 果
c o n n e c t i o n u p g r a d e ; 表 示 如 果
http_upgrade为upgrade,则请求为upgrade(websocket),如果不是,就关闭连接
(3)、前端代码改造,区分ws 还是 WSS
- 因我们的站点支持HTTP 和 HTTPS 双协议栈网站访问,使用同一套前端代码,因此就需要前端同学 在代理中加入判断,当我访问的是HTTP 站点的时候,走WS 协议,同理 当我访问的是HTTPS 站点的时候,走WSS 协议
- 大致JS代码如下:
访问测试:
参考:
文章来源:https://www.cnaaa.net,转载请注明出处:https://www.cnaaa.net/archives/6768