Recently I study cross-domain issues. I learned that it can be solved through node middleware, so I imitated the tutorial and wrote the following code.
<!doctype html>
<html lang="zh-CN">
<body>
<button onclick="sendReq()">click</button>
<script>
function sendReq() {
fetch("/api/request")
.then((res) => res.text())
.then((res) => {
console.log("res：", res);
});
}
</script>
</body>
</html>
and use nodeMdServer.js as server, which listen at 5377 to provide html file above
const express = require("express");
const { createProxyMiddleware } = require("http-proxy-middleware");
const app = express();
app.use(express.static(__dirname));
app.use(
"/api",
createProxyMiddleware({
target: "http://localhost:5378",
pathRewrite: {
"^/api": "",
},
changeOrigin: true,
}),
);
app.listen(5377);
console.log("mid server is running at http://localhost:5377");
and create a new server at 5378 to provide data
const express = require("express");
const app = express();
app.get("/request", (req, res) => {
res.end("request success");
});
app.listen(5378);
console.log("server is running at http://localhost:5378");
I try to use wireshark to capture all packs when I click button, below are these packs
I try to find the pack from 5377 to 5378, because in my opinion, the request is first sent from the browser to port 5377, and then forwarded to port 5378 through the middleware server of port 5377. But I didn't see a similar package, may I ask if my understanding is wrong?
By the way, I would like to ask if ports 61257 and 61258 are browser ports, why is port 61258 sending real requests to port 5378?
The proxy server uses two ports, 5377 is used to communicate with the client (browser). Port 61258 is used to communicate with the server for data retrieval. Please note that port 61258 is not the browser's port.