[HPM] Error occurred while trying to proxy request /socket from localhost:8080 to wss://serve.xxx.com (EPROTO)

[LiamDotPro]

Is this a bug report?

When trying to proxy a websocket connection to a socket server I'm getting the following error from HPM:

[HPM] GET /socket -> wss://service.xxx.com
[HPM] Upgrading to WebSocket
[HPM] Error occurred while trying to proxy request /socket from localhost:8080 to wss://service.xxx.com (EPROTO) (https://nodejs.org/api/errors.html#errors_common_system_errors)

This is followed by a node error:

node:events:304
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at TLSWrap.onStreamRead (node:internal/stream_base_commons:213:20)
Emitted 'error' event on TLSSocket instance at:
    at emitErrorNT (node:internal/streams/destroy:188:8)
    at emitErrorCloseNT (node:internal/streams/destroy:153:3)
    at processTicksAndRejections (node:internal/process/task_queues:80:21) {
  errno: -54,
  code: 'ECONNRESET',
  syscall: 'read'
}

My new connection is being created like so from inside react:

const socketUrl = 'wss://localhost:8080/socket'

    useEffect(() => {
        const socket = new WebSocket(socketUrl)

my setup proxy js contains the following:

const socketProxy = createProxyMiddleware('/socket', {
        target: 'wss://service.xxx.com',
        headers: {"Host": 'service.xxx.com', "Origin": 'https://service.xxx.com '},
        changeOrigin: true,
        secure: true,
        ws: true,
        logLevel: 'debug'
    });

The browser console tells me the following:

WebSocket connection to 'wss://localhost:8080/socket' failed: Error during WebSocket handshake: Unexpected response code: 200

I'm not sure how to fix this and if it's being caused by HPM or an incorrect configuration from inside create-react-app, can you advise if there is something wrong with my configuration or if something is wrong here or with CRA? If it's not HPM I'll happily file a report with CRA or try and fix my own problems further.

Actual behavior

When HPM attempts to rewrite the request a TLS error occur's but is hard to identify the problem.

Setup

• "http-proxy-middleware": "^1.0.6"
• http-proxy-middleware configuration "as above"
• server: express

client info

MacOS
chrome Version 87.0.4280.67 (Official Build) (x86_64)

target server info

Generic express server that has a simple WS implementation.

reproducible demo

If it's absolutely necessary to find the fault I will try and create a demo, but most of our api's needed to reproduce the whole scenario are not public, so I'd have to recreate an example from scratch.

[focux]

I'm having the same error, can you share how you solved it?

EDIT: If someone also lands in this issue, this workaround worked for me: #476 (comment)

[LoveEocding]

i also encountered the same problem