http实现反向代理

需要安装http-proxy-middleware插件

npm i http-proxy-middleware

准备proxy.html, 等会加载proxy.html可直接发起fetch请求

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body>有内容<script>// fetch 发起接口请求fetch("/api").then((res) => res.text());</script></body>
</html>

准备xxx.config.js配置文件，配置proxy代理

module.exports = {serve: {proxy: {"/api": {target: "http://localhost:3000",  // 代理端口号到3000changeOrigin: true,rewrite:'相应的正则替换', // 可写可不写},},},
};

准备proxyTest.js 代理node服务，服务端口号为3000

const http = require("node:http");
const url = require("node:url");http.createServer((req, res) => {// 接口路径带api的，则拦截提示返回成功 const { pathname } = url.parse(req.url);if (pathname === "/api") {res.end("代理 3000 成功");}}).listen(3000, () => {console.log("启动3000服务");});

准备proxy.js 文件

const fs = require("node:fs");
const http = require("node:http");
const url = require("node:url");
// 反向代理中间代码
const { createProxyMiddleware } = require("http-proxy-middleware");// 获取html的内容，启动服务后可直接加载发起接口请求
const html = fs.readFileSync("./proxy.html");// 获取配置文件里的serve配置内容
const config = require("./xxx.config.js");http.createServer((req, res) => {// 获取url接口端口号后面的名称const { pathname } = url.parse(req.url);// 获取配置文件中的 配置 如 /apiconst proxyList = Object.keys(config.serve.proxy);// 若是请求的接口中包含代理配置的内容，进行反向代理if (proxyList.includes(pathname)) {const proxy = createProxyMiddleware(config.serve.proxy[pathname]);// 进行代理proxy(req, res);return;}// 把html内容与服务整合在一起res.writeHead(200, {"Content-Type": "text/html",});res.end(html);}).listen(8080, () => {console.log("启动了一个80服务");});