Angular 13 反向代理 web 套接字错误 404 未找到

Question

版本：

Angular 13 : "socket.io-client": "^4.5.0"
Nodejs 16.x.x : "socket.io": "^4.5.0"

问题：当运行带有静态 websocket 端点的 websocket（使用 socket.io-client）时，我能够连接到后端并且代码工作正常。但是，如果我使用 angular 代理配置，它就无法到达后端，并且出现错误。以下是浏览器的配置和 headers。

代码（NodeJs）

const http = require('http');
const chat = require('./chat');
var server = http.createServer(app);
const io = require('socket.io')(server, {
  cors: true,
  origin: '*',
  rejectUnauthorized: false
});
chat.createSocket(io)

代码 (Angular)

this.socket = io("http://localhost:3000");

在chrome

中回复Headers

Request URL: http://localhost:3000/socket.io/?EIO=4&transport=polling&t=O36i0QS&sid=BtttiXg7zxVnEyCRAAAA
Request Method: GET
Status Code: 200 OK
Remote Address: [::1]:3000
Referrer Policy: strict-origin-when-cross-origin
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 58
Content-Type: text/plain; charset=UTF-8
Date: Sun, 15 May 2022 07:47:46 GMT
Keep-Alive: timeout=5
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Host: localhost:3000
Origin: http://localhost:4200
Referer: http://localhost:4200/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="101", "Google Chrome";v="101"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36

代码 #2 (Angular)

代理配置：


{
    "context": [
      "/socket/*"
    ],
    "target": "http://localhost:3000/socket.io/",
    "ws": true,
    "logLevel": "debug"
  }

服务代码：

this.socket = io("/socket");

在chrome中回复Headers:

Request URL: http://localhost:4200/socket.io/?EIO=4&transport=polling&t=O36iuH0
Request Method: GET
Status Code: 404 Not Found
Remote Address: 127.0.0.1:4200
Referrer Policy: strict-origin-when-cross-origin
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 149
Content-Security-Policy: default-src 'none'
Content-Type: text/html; charset=utf-8
Date: Sun, 15 May 2022 07:51:35 GMT
Keep-Alive: timeout=5
X-Content-Type-Options: nosniff
X-Powered-By: Express
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Cookie: connect.sid=s%3AngS43jIUDoTzp30plUzBEQ0od_I-Br_o.Hth2gCXa8Dw3BwrN%2FN5MXYtAhRvwtLhNcPTc4igQie4
Host: localhost:4200
Referer: http://localhost:4200/home
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="101", "Google Chrome";v="101"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36

更新在运行 angular 上使用命令

ng serve --proxy-config proxy.conf.json --verbose

Angular 编译器日志显示：

[webpack-dev-server] [HPM] Proxy created: /sock/*  -> http://localhost:3000/

在启动套接字连接时，我现在在日志中收到错误

[webpack-dev-server] [connect-history-api-fallback] Not rewriting GET /socket.io/?EIO=4&transport=polling&t=O37i8TH because the client does not accept HTML.

这个配置有问题吗？我正在使用反向代理进行正常的服务器调用，它工作正常。我能够从后端接收数据。但在 websockets 的情况下不是。

如果您需要更多信息，请告诉我，我会相应地编辑问题。提前致谢。

Answer 1

您需要更改 proxy.conf.json

{
  "/sock/*": {
    "target": "http://localhost:3000/socket.io/",
    "ws": true,
    "logLevel": "debug"
  }
}

运行 angular 项目 ng serve --proxy-config proxy.conf.json

你应该在终端看到

10% building modules 2/2 modules 0 active[HPM] Proxy created: /sock  ->  http://localhost:3000

我希望你清楚解决方案

Answer 2

终于找到了解决方案，从nginx配置中得到了提示。

当我在 socket.io 之前添加一条路线时它起作用了。

在前端配置socket路径为：

this.socket = io('/', {
      path: "/chat/socket.io/"
    });

proxy-cofig 为：

{
    "context": [
      "/chat"
    ],
    "target": "http://localhost:3000/",
    "secure": false,
    "ws": true,
    "logLevel": "debug"
  }

将后端配置为：

const io = require('socket.io')(server, {
  path: '/chat/socket.io',
  secure: true,
  // rejectUnauthorized: false,
  cors: true
});

Angular 13 反向代理 web 套接字错误 404 未找到

Angular 13 reverse proxy web socket error 404 not found

sockets

node.js

angular

angular13