HTTPS导致Socket.io/WebSocket连接断开 Rasa聊天机器人前端加载失败

故障根因 #

浏览器报的*混合内容（Mixed Content）*错误是核心问题：你通过HTTPS协议访问https://testibot1.omnia.fi/站点，但前端Botfront聊天组件配置里写死了socket连接地址为HTTP协议的http://testibot1.omnia.fi:5006，浏览器安全策略默认会拦截HTTPS页面下发起的HTTP请求，导致聊天组件无法初始化加载。
Nginx错误日志里的文件不存在、SSL握手失败报错均为爬虫扫描、恶意请求导致，和本次故障无关。

解决方案步骤 #

1. 修正Nginx现有配置错误 #

你现有Nginx配置里的路径匹配规则写错了，把反斜杠\改成正斜杠/，同时打开之前注释的X-Forwarded-Proto配置，示例修改如下：

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;
  # 打开下行配置，传递正确的请求协议给后端
  proxy_set_header X-Forwarded-Proto $scheme;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
}

2. Nginx新增Socket.IO反向代理配置 #

在testibot1.omnia.fi对应的443 SSL server块内，新增Socket.IO请求的反向代理规则，将HTTPS站点下的socket请求转发给后端Rasa的5006端口：

# 新增以下location配置
location /socket.io/ {
  proxy_pass http://127.0.0.1:5006;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
  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_set_header X-Forwarded-Proto $scheme;
  # 调整超时时间适配长连接
  proxy_read_timeout 86400;
}

3. 修改Botfront前端配置 #

将写死的HTTP协议socketUrl改成动态适配当前页面协议的写法，避免混合内容问题：

WebChat.default.init({
  // 其他原有配置保持不变
  // 把原来的socketUrl: "http://testibot1.omnia.fi:5006"替换成下行
  socketUrl: window.location.protocol + "//" + window.location.host,
  socketPath: "/socket.io/",
  // 其他原有配置保持不变
})

4. 生效配置 #

先验证Nginx配置是否正确：

sudo nginx -t

返回success后重载Nginx配置生效：

sudo systemctl reload nginx

刷新前端页面即可正常加载聊天组件。

内容的提问来源于stack exchange，提问作者InnoOmnia