Angular13反向代理Web套接字錯誤404未找到

版本：

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

問題：當使用靜態 websocket 端點（使用 socket.io-client）運行 websocket 時，我能夠連接到后端并且代碼作業正常。但是，如果我使用角度代理配置，則無法到達后端，并且出現錯誤。以下是瀏覽器的配置和標題。

代碼（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)

代碼（角度）

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

在 chrome 中回復標題

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（角度）

代理配置：

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

服務代碼：

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

chrome中的回復標題：

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:ngS43jIUDoTzp30plUzBEQ0od_I-Br_o.Hth2gCXa8Dw3BwrN/N5MXYtAhRvwtLhNcPTc4igQie4
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

使用命令更新 運行角度

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 的情況下。

如果您需要更多資訊，請告訴我，我將相應地編輯問題。提前致謝。

uj5u.com熱心網友回復：

你需要改變你的proxy.conf.json

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

運行角度專案ng serve --proxy-config proxy.conf.json

您應該在終端中看到

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

我希望你清楚解決方案

uj5u.com熱心網友回復：

最后，我找到了解決方案，從 nginx 配置中得到了提示。

當我在 socket.io 之前添加一條路由時，它起作用了。

將前端的套接字路徑配置為：

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

代理配置為：

{
    "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
});

標籤：节点.js 有角度的 插座 角13

上一篇：帶有for回圈的pythonwhile陳述句

下一篇：監視/模擬匯入的匯入