Http-proxy-middleware: Proxying websockets to multiple backends doesn't work

[bduffany]

Is this a bug report?

Yes

Steps to reproduce

1. Set up a proxy server with

app.use(
  '/sockjs-node',
  createProxyMiddleware('/sockjs-node', {
    target: 'http://127.0.0.1:3000',
    ws: true,
  })
);
app.use(
  '/socket.io',
  createProxyMiddleware('/socket.io', {
    target: 'http://127.0.0.1:4000',
    ws: true,
  })
);

The /sockjs-node server can be quickly spun up with create-react-app since that is the socket for Webpack hot reload. /socket.io can be quickly spun up with a socket.io example server.

1. Load up the React app in your browser. The /sockjs-node requests are not proxied correctly. The HPM log output shows that it is trying to proxy the /sockjs-node request to port 4000, resulting in an ECONNREFUSED error.

Setup

• http-proxy-middleware: 1.0.5
• http-proxy-middleware configuration: see above
• server: express 4.17.1

client info

Chrome (latest) / Ubuntu 20.04 (Linux)

target server info

One is a webpack dev server, one is a simple express server with socket.io config

Reproducible Demo

https://github.com/bduffany/hpm-bug

[bduffany]

I found that if I change

app.use(
  '/sockjs-node',
  createProxyMiddleware('/sockjs-node', {
    target: 'http://127.0.0.1:3000',
    ws: true,
  })
);

to

app.use(
  createProxyMiddleware('/sockjs-node', {
    target: 'http://127.0.0.1:3000',
    ws: true,
  })
);

Then the issue is fixed. No ideas yet as to why. However, I think this fix results in really bad performance, because express is now going to be running that proxy middleware on every request, even ones that don't match /sockjs-node.

[bduffany]

FYI added a reproducible demo repro here: https://github.com/bduffany/hpm-bug

One liner you can throw in your terminal to get it up and running, ready to debug in Chrome:

git clone https://github.com/bduffany/hpm-bug && cd hpm-bug && ((sleep 8 && google-chrome --auto-open-devtools-for-tabs http://localhost:8080) &) ; ./run.sh

[barczaG]

+1

[hbi99]

+1

[Cheyenne55]

You just saved my day with your fix. Spent 3 hours because I had this exact problem.

When proxying to several websocket servers Chrome was showing errors like "Invalid frame header" or "WebSocket connection failed: One or more reserved bits are on: reserved1 = 0, reserved2 = 1, reserved3 = 1" which googling them up led to absolute non-sense.

I think this issue should really be patched up.

[bduffany]

@Cheyenne55 I experienced the same problem with "One or more reserved bits are on," and Googling led to nothing helpful. I only discovered the root cause of the problem because I noticed in the log output that it was trying to proxy requests to the wrong port.

[stefanfuchs]

In my case, I was getting an error code like this: ERR_STREAM_WRITE_AFTER_END
This was crashing the proxy server completely.

Separating the proxy server in 2 instances, each with only one websocket endpoint, solved the problem.
it's a different kind of error than the previous posts, but I believe it might be related.

[gilsdav]

Same issue but it's because it listen a global "upgrade" event for all ws subscriptions.
https://github.com/chimurai/http-proxy-middleware/blob/95233df91588f3f0bd5c21961ae6405acd3e647b/src/http-proxy-middleware.ts#L66
I had to handle it myself to choose when to call the upgrade function of the proxy that I need.