记录一次https协议下js连接mq报错的问题
背景: 由于项目要使用mq, 经过筛选最终决定要使用rabbitmq, 首先从开发到测试(测试环境使用的是http协议)一切还很顺利, 但是部署到生产环境(https)上后mq连接失败, 故写改文章记录一下。
前端代码片段:
初始化对象
var ws = new WebSocket('ws://ip:port/ws');
初始化对象时报错:
Mixed Content: The page at 'https://xxx' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://ip地址:15674/ws'. This request has been blocked; this endpoint must be available over WSS.
这段话的大致意思是: 页面通过HTTPS加载, 该请求不可用, 必须在wss上可用
因此我们对配置进行修改为:
var ws = new WebSocket('wss://ip:port/ws');
结果重点来了:
WebSocket connection to 'wss://ip:15674/ws' failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR
websocket还是连接失败,大概意思就是: 连接出错, SSL协议错误。
说明证书有问题。因此, 找到了问题点就好解决了: 通过nginx做代理.
代码如下:
server {
listen 443;
server_name 域名;
ssl on;
ssl_certificate /root/ssl/1_域名_bundle.crt;
ssl_certificate_key /root/ssl/2_域名.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;
location /ws {
proxy_pass http://ip:15674; # 代理rabbitmq
proxy_read_timeout 60s;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'Upgrade';
}
划重点:
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection ‘Upgrade’;
这两行表明:websocket连接进入的时候,进行一个连接升级将http连接变成websocket的连接
nginx在1.3版本以后支持websocket协议
最终:
var ws = new WebSocket('wss://{域名}/ws');
至此连接成功~
如下图图片: