使用反向代理 Nginx 的 Socket.io Socket.onPacket 错误答案

【问题标题】：Socket.io Socket.onPacket Error with reverse proxy Nginx使用反向代理 Nginx 的 Socket.io Socket.onPacket 错误
【发布时间】：2021-07-01 18:15:30
【问题描述】：

我有一个与 node.js 服务器通信的小型 Angular 应用程序。两者都部署在 aws 上，我使用 Nginx 反向代理在 4000 端口访问 node.js 服务器。

nodejs.server 的所有端点都可以正常工作，除了 socket.io 连接。当我在我的机器中运行这两个应用程序（前端应用程序和 node.js 服务器）时，socket.io 连接工作正常，但是当我尝试在 aws 上部署它时，我在前端应用程序中收到此错误：

Error: server error
        at Socket.onPacket (socket.js:401)
        at XHR.<anonymous> (socket.js:216)
        at XHR.push.dMso.Emitter.emit (index.js:145)
        at XHR.onPacket (transport.js:103)
        at callback (polling.js:101)
        at Array.forEach (<anonymous>)
        at XHR.onData (polling.js:105)
        at Request.<anonymous> (polling-xhr.js:94)
        at Request.push.dMso.Emitter.emit (index.js:145)
        at Request.onData (polling-xhr.js:236)

这是我在/etc/nginx/sites-available/default 中的 Nginx 配置：

server{
  charset utf-8;
  listen 80 default_server;
  server_name 18.231.153.164;

  # angular app & front-end files
  location / {

      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host;


      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";

      root /opt/front-end/dist/admin;
      try_files $uri /index.html;
}

  # node api reverse proxy
  location /api/ {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host; 
      proxy_pass http://localhost:4000/;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade"; 
}

  # node api reverse proxy
  location /socket.io {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host; 
      proxy_pass http://localhost:4000/;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade"; 
}

如您所见，我的 node.js 在端口 4000 上运行，因此每次有人尝试使用路径 /api/ 访问网站时，它都会被重定向到 node.js 服务器.

这是我的一段 node.js 代码：

const socketio = require('socket.io');
const express = require('express');
const app = express();

const port = 4000;
const httpServer = app.listen(port, () => {
    console.log('Server listening on port ' + port);
});


let io = socketio(httpServer, {
  cors: {
    origin: "http://localhost:5200",
  },
});

// auth moddleware
io.use((socket, next, err) => {
    const jwtToken = socket.handshake.query.jwtToken;
    // console.log('token --> ', jwtToken);

    const user = socket.handshake.query.user;
    if (!user) {return};
    socket.user = JSON.parse(user);
    next();
 });

io.on('connection', (socket) => {
    socket.emit('messageFromServer', {data: 'Welcome to server'});
})

这是我的一段前端代码：

import {io} from 'socket.io-client';

...

// Connect to server (When I am running locally I change '/api' to 'http://localhost:4000' 
this.socket = io('/api', {secure: true, reconnection: true, rejectUnauthorized: false, query: {user: user, jwtToken: this.authService.authValue.jwtToken}});

// Listen to events
this.socket.on('usersOnline', (usersOnline) => {
  console.log('Users online now:', usersOnline);
});

this.socket.on('connect_error', (err) => {
    console.log('ERR::', err);
  });

服务端socket.io的版本是“^4.0.0”，前面socket.io-client的版本是“^4.0.0”。

我相信这个问题与反向代理和 socket.io 有关。正如我之前所说，socket.io 连接在本地环境中运行良好。

有人可以帮帮我吗？

【问题讨论】：

标签： node.js nginx socket.io webserver

【解决方案1】：

我找到了解决方案。我需要在socket.io反向代理上添加proxy_redirect off;。

location /socket.io {
    proxy_pass http://localhost:4000;
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

然后我遇到了另一个问题，在字体末尾我开始收到错误或无效的命名空间。所以我将客户端连接更改为/ 而不是/api：

this.socket = io('/', {query: {user: user, jwtToken: this.authService.authValue.jwtToken}});

【讨论】：