目录
场景:
在本地开发环境中一直使用的是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时,加“/”与不加“/”的区别
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
2. 使用域名
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方式主要是替换(将匹配到的相同部分替换掉,然后保留完全匹配后面的所有)