解决https下前端无法连接rabbitmq问题(ws)

记录一次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');

至此连接成功~

如下图图片: