Cannot set header in onProxyReqWs

kqdjacky commented 2 years ago

Checks

[X] I understand project setup issues should be asked on StackOverflow or in GitHub Discussions.
[X] I updated to latest http-proxy-middleware.

Describe the bug (be clear and concise)

Attempt modify the header in the onProxyReqWs for a websocket request, but failed.

In the proxy:

const { createProxyMiddleware } = require('http-proxy-middleware');
const express = require('express');
const app = express();
const port = 8000;

const wsProxy = createProxyMiddleware("/socket.io/", {
  target: "http://localhost:3000",
  pathRewrite: {
    "^/socket.io": "/socket.io",
  },
  changeOrigin: true,
  ws: true,
  onProxyReqWs: (proxyReq, req, socket, options, head) => {
    console.log('onProxyReqWs: req.headers', req.headers);
    proxyReq.setHeader('x-my-id', 'ID002');
  }
});

app.use(
  createProxyMiddleware("/socket.io/socket.io.js/", {
    target: "http://localhost:3000",
    pathRewrite: {
      "^/socket.io/socket.io.js": "/socket.io/socket.io.js"
    },
  }),
  wsProxy,
  createProxyMiddleware("/", {
    target: "http://localhost:3000",
    pathRewrite: {
      "^/": ""
    },
  })
);

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

In the server:

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.use((socket, next) => {
  console.log('io middleware:', socket.request.headers);
  next();
});

io.on('connection', (socket) => {
  console.log('a user connected,', socket.request.headers);
  socket.on('disconnect', () => {
    console.log('user disconnected');
    socket.broadcast.emit('chat message', 'a user disconnected');
  });
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

The index.thml:

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" /><button>Send</button>
    </form>

    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();

      var messages = document.getElementById("messages");
      var form = document.getElementById("form");
      var input = document.getElementById("input");

      form.addEventListener("submit", function (e) {
        e.preventDefault();
        if (input.value) {
          socket.emit("chat message", input.value);
          input.value = "";
        }
      });

      socket.on("chat message", function (msg) {
        var item = document.createElement("li");
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
      });
    </script>
  </body>
</html>

There is not x-my-id printed in the log.

Step-by-step reproduction instructions

Please see above examle.

Expected behavior (be clear and concise)

The header should be added and printed in the console log.

How is http-proxy-middleware used in your project?

λ yarn why http-proxy-middleware
yarn why v1.22.19
warning package.json: No license field
[1/4] Why do we have the module "http-proxy-middleware"...?
[2/4] Initialising dependency graph...
warning socket-chat-example@0.0.1: No license field
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "http-proxy-middleware@2.0.6"
info Has been hoisted to "http-proxy-middleware"
info This module exists because it's specified in "dependencies".
info Disk size without dependencies: "148KB"
info Disk size with unique dependencies: "548KB"
info Disk size with transitive dependencies: "2.67MB"
info Number of shared dependencies: 6
Done in 0.28s.

What http-proxy-middleware configuration are you using?

N/A

What OS/version and node/version are you seeing the problem?

λ node -v
v16.15.1

Additional context (optional)

No response

kqdjacky commented 2 years ago

@chimurai could you take a look?

Marcus-Rise commented 1 year ago

@chimurai, any comments?

chimurai / http-proxy-middleware

Cannot set header in onProxyReqWs #808