Websocket 拒绝连接，但仍然可以接收和发送

Question

我在 foo.domain.com 下有一个网站运行，在 api.domain.com 下有一个 websocket 和一个 express api，每当我尝试连接到它时，我一旦套接字连接，我收到 400 作为响应代码。但是我正在成功接收和发送事件。最大的问题是，网络选项卡被 get 和 post 每隔几秒请求一次作为对无法创建 websocket 关系的补偿。

我注意到只要传输查询正在轮询，连接就会成功，但在其 websocket 时会失败。

这是我第一次使用 Websockets，所以请多多包涵。

Socket.io版本：2.3.0

速成版：4.17.1

我的套接字脚本运行我的 api

var listener = app.listen(6606, function () {
   console.log(`API listening on port ${listener.address().port}`)
});
let io = require('socket.io')(listener);

io.on('connection', socket => {
 console.log("Connected");
 var test = "Welcome";
 setTimeout(() => {
   socket.emit('test', test)
 }, 5000);
 socket.on('received', data => {
   console.log(data)
 })
})

这是我的 Nuxt.js 应用程序中使用的那个

mounted() {
  this.websocket = socket("https://api.domain.com");
  this.websocket.on('test', data => {
    this.websocket.emit('received', {message: "Connected"})
  })
},

我的 Websocket 的控制台输出：

来自站点的网络分析：

Answer 1

经过大量研究，我发现这是我的 Apache2 配置问题。

我的 API 运行在端口 6606 下。

问题是 Apache 不想升级我的 WebSocket 请求，而是抛出了一个错误。

如果您有同样的问题记得将每次提及的 6606 更改为您的 Websocket 运行的端口

基本上我必须添加：

  RewriteEngine on
   RewriteCond %{HTTP:UPGRADE} ^WebSocket$ [NC]
   RewriteCond %{HTTP:CONNECTION} ^Upgrade$ [NC]
   RewriteRule .* ws://127.0.0.1:6606%{REQUEST_URI} [P]

我的完整 Apache 配置：

<VirtualHost *:80>
 ServerName api.domain.com
  ProxyPass / http://127.0.0.1:6606/
  ProxyPassReverse / http://127.0.0.1:6606/
</VirtualHost>

<VirtualHost *:443>
 ServerName api.domain.com
  SSLProxyEngine On
  ProxyPass / http://127.0.0.1:6606/
  ProxyPassReverse / http://127.0.0.1:6606/
  SSLEngine on
    SSLCertificateFile /etc/letsencrypt/live/api.domain.com/cert.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/api.domain.com/privkey.pem
    SSLCertificateChainFile /etc/letsencrypt/live/api.domain.com/chain.pem
  RewriteEngine on
  RewriteCond %{HTTP:UPGRADE} ^WebSocket$ [NC]
  RewriteCond %{HTTP:CONNECTION} ^Upgrade$ [NC]
  RewriteRule .* ws://127.0.0.1:6606%{REQUEST_URI} [P]
</VirtualHost>

Websocket 拒绝连接，但仍然可以接收和发送

Websocket Refuses Connection but receiving and emitting are still possible

javascript

node.js

websocket

socket.io

nuxtjs