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

Question

Versions:

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

Problem: When running websocket with static websocket endpoint(using socket.io-client), I am able to connect to backend and the code works fine. But if I use angular proxy config it is unable to reach the backend and I get an error. Below are the configuration and the headers from the browser.

Code (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)

Code (Angular)

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

Reply Headers in 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

Code #2 (Angular)

Proxy Config:

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

service code:

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

Reply Headers in 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%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

Update on running angular with command

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

Angular Compiler logs show:

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

And on initiaiting a socket connection I am now getting an error in the logs

[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.

Is there something wrong in this configuration? I am using reverse proxy for making normal server calls and it works fine. I am able to receive data from the backend. But not in the case of websockets.

Please let me know if you need any more information I will edit the question accordingly. Thanks in advance.

Answer 1

You need to change in your proxy.conf.json

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

Run angular project by ng serve --proxy-config proxy.conf.json

You should see in terminal

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

I hope you clear with the solution

Answer 2

Finally, I've found the solution, got the hint from the nginx configuration.

It worked when I added a route before socket.io.

Configure the socket path at the frontend as:

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

proxy-cofig as:

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

Configure the backend as:

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