http实现反向代理

http实现反向代理
  • 需要安装http-proxy-middleware插件
js 复制代码
npm i http-proxy-middleware
  • 准备proxy.html, 等会加载proxy.html可直接发起fetch请求
js 复制代码
<!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代理
js 复制代码
module.exports = {
  serve: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",  // 代理端口号到3000
        changeOrigin: true,
        rewrite:'相应的正则替换', // 可写可不写
      },
    },
  },
};
  • 准备proxyTest.js 代理node服务,服务端口号为3000
js 复制代码
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 文件
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);
    // 获取配置文件中的 配置 如 /api
    const 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服务");
  });
nodejs反向代理基本实现思路如上
相关推荐
甜瓜看代码2 小时前
1.
react.js·node.js·angular.js
伍哥的传说2 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
01传说3 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
摘星小杨7 小时前
如何卸载本机的node.js
node.js
程序小武8 小时前
网络请求的基本概念、原理及生活化解析
网络协议
甘露寺10 小时前
HTTP 请求体类型详解:选择最适合的数据提交格式
网络·网络协议·http
傻啦嘿哟10 小时前
长效住宅代理IP:反爬虫战场上的隐形盾牌
爬虫·网络协议·tcp/ip
刘坤1512 小时前
封装axios二方包
前端·http
三体世界13 小时前
TCP传输控制层协议深入理解
linux·服务器·开发语言·网络·c++·网络协议·tcp/ip
LuDvei13 小时前
CH9121T电路及配置详解
服务器·嵌入式硬件·物联网·网络协议·tcp/ip·网络安全·信号处理