连接到 Websocket 代理时 Google Chrome 出现错误

Posted

技术标签:

【中文标题】连接到 Websocket 代理时 Google Chrome 出现错误【英文标题】:Error on Google Chrome when connecting to Websocket proxy 【发布时间】:2021-09-09 10:52:36 【问题描述】:

我有一个简单的后端 Kotlin 应用程序,它在 Google 云虚拟机上运行 Netty 服务器。它接收 websocket 连接并向客户端发送一些简单的消息。我还在同一台机器上运行 nginx 服务器,它侦听 443 端口并将请求重定向到我的应用程序(127.0.0.1:8080)。这是nginx配置:

server 

    listen 443 ssl;
    server_name www.mydomain.com;

    ssl_certificate /etc/nginx/certs/my-cert.crt;
    ssl_certificate_key /etc/nginx/certs/my-key.key;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;

    location / 
        proxy_pass http://127.0.0.1:8080;
        proxy_read_timeout 86400;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header Host $http_host;

    



配置中的SSL证书是有效的,并且是真实CA认证的。

现在我正在尝试编写一个简单的前端 Angular 应用程序来连接到我的代理:

return webSocket(
      url: `wss://www.mydomain.com/$path`,
      closeObserver: 
        next: (event: CloseEvent) =>  console.log(event) 
      
    ).multiplex(() => , () => , () => true)

我正在订阅此方法返回的 Observable 并打印传入的消息。

所有这些都可以在除 Google Chrome 之外的所有浏览器中正常运行。 (我试过 Firefox、Opera、Chromium、Edge)。一切都在 chrome 扩展 Smart Websocket Client 中工作。它甚至在 Chrome 的隐身模式下也能正常工作,但在 ragular 模式下却失败了。

在 chrome 上我得到了

WebSocket connection to 'wss://mydomain.com/something' failed.

我记录的CloseEvent不是很有帮助,它只是说代码是1006,字段原因是空的。

当我绕过代理并使用 ws://www.mydomain.com:8080/something 直接连接到我的应用程序时,它在 chrome 上运行良好。

我猜我的 nginx 配置有问题,买我真的不知道是什么。所有为 websockets 配置 nginx 的指南都说应该这样配置。

我花了 2 天时间搜索有关此问题的信息,但没有找到任何关于为什么会发生这种情况以及我可以做些什么来解决它的真正答案。

有人知道为什么会这样吗?

更新 这是另一个有趣的事情。我编写了一个连接到我的代理的简单脚本,就像我的 Angular 应用程序一样,但使用标准 api。

let ws = new WebSocket("wss://mydomain.com/something");
ws.onmessage = (ev) => 
    console.log(ev.data);
    document.getElementById("result").innerhtml += ev.data
;
ws.onerror = (err) => 
    console.log(err)

当我使用 file:// 在 chrome 中打开这个文件时,一切正常。它连接到我的 ws 服务器并在屏幕上打印传入的消息。但是当我运行本地 Apache 服务器并在 localhost:80 上提供相同的文件时,我在 Chrome 中遇到了与以前相同的错误。 (通过 localhost 访问文件时,其他浏览器和隐身模式仍然可以正常工作) 所以这个问题和Angular没有太大关系。

【问题讨论】:

【参考方案1】:

您提到它在私有/隐身模式下有效,您是否尝试禁用所有扩展并连接到 websocket?

【讨论】:

我尝试禁用广告拦截,它成功了!没想到 Adblock 会这样在我背后捅我一刀。 这个帖子里也提到过:***.com/a/63679166/14681038

以上是关于连接到 Websocket 代理时 Google Chrome 出现错误的主要内容,如果未能解决你的问题,请参考以下文章

无法通过代理连接到 websocket

无法使用 Nginx 反向代理连接到 Websocket 服务器

带有代理的 WSS 使用端口 443 浏览器客户端连接到端口 6001 上的 websocket 服务器

如何在NodeJS中代理websocket连接到其他websockets

neo4 WebSocket 连接到“ws://localhost:7687/”失败:通过代理服务器建立隧道失败

通过 nginx websocket 代理连接时 WebApp 崩溃