http-proxy-middleware
http-proxy-middleware copied to clipboard
Published
20 hours ago •
chimurai
chimurai
Cannot set header in onProxyReqWs
trafficstars
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 [email protected]: No license field
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
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
