HTTPS 中断 Socket.io/websocket 连接答案

【问题标题】：HTTPS breaks Socket.io/websocket connectionHTTPS 中断 Socket.io/websocket 连接
【发布时间】：2021-12-05 14:11:04
【问题描述】：

故障描述
我在我的测试环境中运行在 docker 容器中的 Rasa 聊天机器人。 Chatbot 的前端是 Botfront 网络聊天小部件，位于同一服务器中由 Apache2 提供服务的网站中。我还安装了 Nginx 作为反向代理，然后为 Apache 虚拟域提供服务。聊天机器人直接从 Apache http://testibotti2.omnia.fi:444/ 工作，也可以通过反向代理 http://testibotti2.omnia.fi/ 工作，但使用 https 时失败，即聊天机器人小部件未显示 https://testibot1.omnia.fi/

我的环境

Server version: Apache/2.4.41 (Ubuntu)  
nginx version: nginx/1.18.0 (Ubuntu  
Ubuntu 18.04  
Docker version 20.10.9, build c2ea9bc  
docker-compose version 1.29.2, build 5becea4c

配置文件

Nginx 反向代理（出于测试目的，我已将 testibotti2 SSL 部分注释掉）

server {

   #root /var/www/html/;
   #index index.html index.htm;

   server_name testibot1.omnia.fi;
   #server_name 127.0.0.1
   index index.php index.html index.htm index.nginx-debian.html;
   root /var/www/public_html/testibot1;

   location \ {

   proxy_pass http://testibot1.omnia.fi:444;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $remote_addr;
   proxy_set_header Host $host;  
   # I have tried these parameters below but no success
   #proxy_redirect     off;
   #proxy_set_header X-Forwarded-Proto https;
   #proxy_set_header X-Forwarded-Proto $scheme;  
   # also these parameters I added after SSL installed, no success
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection "upgrade";

   }

   access_log      /var/log/nginx/testibot1.fi_access.log;
   error_log       /var/log/nginx/testibot1.fi_error.log;


   listen 443 ssl; # managed by Certbot
   ssl_certificate /etc/letsencrypt/live/testibot1.omnia.fi/fullchain.pem; # managed by Certbot
   ssl_certificate_key /etc/letsencrypt/live/testibot1.omnia.fi/privkey.pem; # managed by Certbot
   include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
   ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {

   #root /var/www/html/;
   #index index.html index.htm;

   server_name testibotti2.omnia.fi;
   #server_name 127.0.0.1
   index index.php index.html index.htm index.nginx-debian.html;
   root /var/www/public_html/testibotti2;

   location \ {

   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $remote_addr;
   proxy_set_header Host $host;
   proxy_pass http://testibotti2.omnia.fi:444;
   }

   access_log      /var/log/nginx/testibotti2.fi_access.log;
   error_log       /var/log/nginx/testibotti2.fi_error.log;


#   listen 443 ssl; # managed by Certbot
#   ssl_certificate /etc/letsencrypt/live/testibot1.omnia.fi/fullchain.pem; # managed by Certbot
#   ssl_certificate_key /etc/letsencrypt/live/testibot1.omnia.fi/privkey.pem; # managed by Certbot
#   include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
#   ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = testibot1.omnia.fi) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


   listen 80;

   server_name testibot1.omnia.fi;
    return 404; # managed by Certbot


}

#server {
#    if ($host = testibotti2.omnia.fi) {
#        return 301 https://$host$request_uri;
#    } # managed by Certbot


#   listen 80;

#   server_name testibotti2.omnia.fi;
#   return 404; # managed by Certbot


#}

Botfront 网络聊天小部件配置

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/rasa-webchat@0.11.12/lib/index.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Testisaitti 1
<div id="webchat"></div>
<script>
  WebChat.default.init({
    showFullScreenButton: true,
    selector: "#webchat",
    initPayload: "/tervetuloa",
    customData: {"language": "fi"}, // arbitrary custom data. Stay minimal as this will be added to the socket
    socketUrl: "http://testibot1.omnia.fi:5006",
    socketPath: "/socket.io/",
    embedded: false,
    title: "AsPa botti",
    subtitle: "Testibotti 1",
    inputTextFieldHint: "Vastaa kysymyksiin",
    profileAvatar:"robot_icon.png",
    params: {"storage": "session"} // can be set to "local"  or "session". details in storage section.
  })
</script>

</body>
</html>

我在浏览器调试窗口中看到此错误

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '<URL>'. This request has been blocked; the content must be served over HTTPS.

Nginx 错误日志

paulii@vetbot7:/var/www/public_html/testibot1$ sudo tail -f /var/log/nginx/testibot1.fi_error.log
[sudo] password for paulii:
2021/10/18 10:04:50 [error] 3469367#3469367: *60 open() "/var/www/public_html/testibot1/omnia.fi.db" failed (2: No such file or directory), client: 89.248.173.145, server: testibot1.omnia.fi, request: "GET /omnia.fi.db HTTP/1.1", host: "testibot1.omnia.fi"
2021/10/18 10:04:50 [error] 3469367#3469367: *60 open() "/var/www/public_html/testibot1/omnia.fi.sqlite" failed (2: No such file or directory), client: 89.248.173.145, server: testibot1.omnia.fi, request: "GET /omnia.fi.sqlite HTTP/1.1", host: "testibot1.omnia.fi"
2021/10/18 10:05:26 [error] 3469367#3469367: *66 open() "/var/www/public_html/testibot1/favicon.ico" failed (2: No such file or directory), client: 91.153.58.139, server: testibot1.omnia.fi, request: "GET /favicon.ico HTTP/1.1", host: "testibot1.omnia.fi", referrer: "https://testibot1.omnia.fi/"
2021/10/18 10:05:52 [crit] 3469367#3469367: *81 SSL_do_handshake() failed (SSL: error:141CF06C:SSL routines:tls_parse_ctos_key_share:bad key share) while SSL handshaking, client: 35.203.251.54, server: 0.0.0.0:443
2021/10/18 10:05:54 [crit] 3469367#3469367: *90 SSL_do_handshake() failed (SSL: error:141CF06C:SSL routines:tls_parse_ctos_key_share:bad key share) while SSL handshaking, client: 107.178.200.215, server: 0.0.0.0:443
2021/10/18 10:07:15 [crit] 3469367#3469367: *103 SSL_do_handshake() failed (SSL: error:141CF06C:SSL routines:tls_parse_ctos_key_share:bad key share) while SSL handshaking, client: 107.178.237.2, server: 0.0.0.0:443
2021/10/18 11:31:10 [error] 3470484#3470484: *2 open() "/var/www/public_html/testibot1/5007" failed (2: No such file or directory), client: 91.153.58.139, server: testibot1.omnia.fi, request: "GET /5007 HTTP/1.1", host: "testibotti2.omnia.fi"
2021/10/18 11:31:12 [error] 3470484#3470484: *2 open() "/var/www/public_html/testibot1/5007" failed (2: No such file or directory), client: 91.153.58.139, server: testibot1.omnia.fi, request: "GET /5007 HTTP/1.1", host: "testibotti2.omnia.fi"
2021/10/18 11:31:21 [error] 3470484#3470484: *2 open() "/var/www/public_html/testibot1/5007" failed (2: No such file or directory), client: 91.153.58.139, server: testibot1.omnia.fi, request: "GET /5007 HTTP/1.1", host: "testibotti2.omnia.fi"
2021/10/18 11:32:21 [error] 3470484#3470484: *3 open() "/var/www/public_html/testibot1/favicon.ico" failed (2: No such file or directory), client: 91.153.58.139, server: testibot1.omnia.fi, request: "GET /favicon.ico HTTP/1.1", host: "testibotti2.omnia.fi", referrer: "https://testibotti2.omnia.fi/"

【问题讨论】：

标签： nginx ssl websocket https apache2

【解决方案1】：

我搞定了

这是 Ngingx 反向代理配置文件中需要的

server {

   server_name testibot1.omnia.fi;
   index index.php index.html index.htm index.nginx-debian.html;
   root /var/www/public_html/testibot1;

   location / {

   proxy_pass http://testibot1.omnia.fi:444;
   proxy_set_header X-Real-IP $remote_addr;
   proxy_set_header X-Forwarded-For $remote_addr;
   proxy_set_header Host $host;

   }

   location /socket.io/ {
   proxy_pass http://testibot1.omnia.fi:5006/socket.io/;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection 'upgrade';
   proxy_set_header Host $host;
   proxy_cache_bypass $http_upgrade;
   }

这是网页中需要的

socketUrl: "https://testibot1.omnia.fi",

非常感谢亚历山大·塔拉索夫！您的想法使我走上了正确的道路，经过数十次尝试，我找到了正确的组合

【讨论】：