Angular Proxy dropping the WebSocket Upgrade Header

Question

I'm using the proxy from the Angular CLI
ng serve --proxy-config proxy.conf.json
with the following configuration

{
    "/api/*": {
        "ws": true,
        "secure": false,
        "target": "http://localhost:80",
        "logLevel": "debug"
    }
}

While the HTTP connections are properly forwarded the WebSocket connections do not work. In wireshark I can see that the incoming connection (Browser to Angular Proxy) contains the required websocket headers:

sec-websocket-extensions: permessage-deflate; client_max_window_bits
sec-websocket-key: ...
sec-websocket-version: 13
upgrade: websocket
connection: Upgrade

But looking at the outgoing connection (Angular Proxy to Server) the upgrade header is missing:

sec-websocket-extensions: permessage-deflate; client_max_window_bits
sec-websocket-key: ...
sec-websocket-version: 13

Due to the missing upgrade header the connection is then rejected on the server-side.

Do I need a different configuration to preserve the WebSocket header fields or is this a bug?

Angular CLI: 6.0.3
Node: 10.0.0
OS: linux x64

Answer 1

You may need to add this as a header

"headers": {
  "Connection": "upgrade"
}