发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

Express代理转发服务器实现

儒平制冷

2

主题

2

帖子

6

积分

新手上路

Rank: 1

积分
6
显示全部楼层
express的代理转发

其实我的内心关于这个Express，我的内心是拒绝的，不是说，我对这个框架有什么看法，而是因为这个大作业的问题。是的我还是一个大三老菜鸡，苦练 Java 全干开发，Python 人工智能 整整 一坤年。期间拿了几个奖，水了篇论文 而已。
那么这篇文章主要做的，其实很简单就是，做个代理转发。前端请求，先到express服务器，然后转发到flask服务器，为什么非要转发呢，原因很简单，web作业非要用node平台，没办法，但是我的服务已经用flask做好了，当然这个和我先前写的那个微信聊天的不一样哈，这个是另一个，是视觉识别算法，说到这个，我本人目前也在手写一个全新的目标检测算法，希望可以起到不错的效果，扯远了。所以没有办法，只能做一个express的代理转发。
但是呢，为了体现工作量，我在这个转发服务器里面加了点东西：

就是这个，加点curd,不然不好混。

项目结构

这个的话，更像是一个dome,所以的话，项目结构非常简单。

因为核心功能就一个，就是做转发，然后呢，加上一些配套的记录就好了。
然后就是我们的数据库还有页面之类的。当然整个项目还是使用这个生成工具先生成了一个模板工程的。
由于整个项目简单，骨架也是生成的，所以我这边就只说，它的一些核心实现了。

转发

那么首先就是我们的核心，代理转发：
  1. const proxy = require("http-proxy-middleware").createProxyMiddleware;
  2. app.use(
  3.     "/",
  4.     proxy(
  5.         [`/api/**`], {
  6.             target: `http://www.httpbin.org/anything/`,
  7.             changeOrigin: true,
  8.             onProxyReq: (proxyReq, req, res) => {
  9.                 // 在代理请求发送到目标服务器之前，对请求头进行修改
  10.                 const sourceUrl = req.originalUrl;
  11.                 const targetUrl = "your address";
  12.                 db.insertProxy(sourceUrl, targetUrl, (err, id) => {
  13.                     if (err) {
  14.                         console.error(err);
  15.                     } else {
  16.                         console.log(`New proxy request saved with ID ${id}.`);
  17.                     }
  18.                 });
  19.             },
  20.             onProxyRes: (proxyRes, req, res) => {
  21.                 // 在代理服务器收到目标服务器的响应后，对响应头进行修改
  22.                 proxyRes.headers['x-custom-header'] = 'Huterox';
  23.             }
  24.         },
  25.     ),
  26. );
复制代码
转发记录

然后其实就是我们的转发记录的了。这里的话我使用的是sqlite3。
这边把一些方法都封装到了db.js当中去了。
  1. const sqlite3 = require('sqlite3').verbose();
  2. // 创建数据库连接
  3. const db = new sqlite3.Database('./db.sqlite', err => {
  4.     if (err) {
  5.         console.error(err.message);
  6.     } else {
  7.         console.log('Connected to the db.sqlite database.');
  8.     }
  9. });
  10. // 创建表
  11. const createTable = () => {
  12.     db.run(
  13.         `CREATE TABLE IF NOT EXISTS proxies (
  14.       id INTEGER PRIMARY KEY AUTOINCREMENT,
  15.       source_url TEXT NOT NULL,
  16.       target_url TEXT NOT NULL,
  17.       created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
  18.     )`,
  19.         err => {
  20.             if (err) {
  21.                 console.error(err.message);
  22.             } else {
  23.                 console.log('Table proxies created successfully.');
  24.             }
  25.         }
  26.     );
  27. };
  28. //查找
  29. const searchProxy = function(keyword, offset, limit, callback) {
  30.     const pattern = `%${keyword}%`;
  31.     const countSql = `SELECT COUNT(*) as count FROM proxies WHERE source_url LIKE ? OR target_url LIKE ?`;
  32.     const sql = `SELECT * FROM proxies WHERE source_url LIKE ? OR target_url LIKE ? ORDER BY created_at DESC LIMIT ? OFFSET ?`;
  33.     db.get(countSql, [pattern, pattern], (err, row) => {
  34.         if (err) {
  35.             callback(err, {});
  36.             return;
  37.         }
  38.         const totalCount = row.count;
  39.         db.all(sql, [pattern, pattern, limit, offset], (err, rows) => {
  40.             if (err) {
  41.                 callback(err);
  42.                 return;
  43.             }
  44.             const proxies = rows.map(row => ({
  45.                 id: row.id,
  46.                 sourceUrl: row.source_url,
  47.                 targetUrl: row.target_url,
  48.                 createdAt: row.created_at,
  49.             }));
  50.             callback(null, { proxies, totalCount });
  51.         });
  52.     });
  53. };
  54. // 插入一条记录
  55. const insertProxy = (sourceUrl, targetUrl, callback) => {
  56.     db.run(`INSERT INTO proxies (source_url, target_url) VALUES (?, ?)`, [sourceUrl, targetUrl], err => {
  57.         if (err) {
  58.             console.error(err.message);
  59.             callback(err.message, null);
  60.         } else {
  61.             console.log('New proxy added successfully.');
  62.             db.get(`SELECT last_insert_rowid() as id`, (err, row) => {
  63.                 callback(null, row.id);
  64.             });
  65.         }
  66.     });
  67. };
  68. // 根据 ID 查询代理转发记录
  69. const getProxyById = (id, callback) => {
  70.     db.get(`SELECT * FROM proxies WHERE id = ?`, [id], (err, row) => {
  71.         if (err) {
  72.             console.error(err.message);
  73.             callback(err.message, null);
  74.         } else {
  75.             console.log(`Proxy with ID ${id} found.`);
  76.             callback(null, row);
  77.         }
  78.     });
  79. };
  80. // 查询所有代理转发记录
  81. const getAllProxies = callback => {
  82.     db.all(`SELECT * FROM proxies ORDER BY id`, (err, rows) => {
  83.         if (err) {
  84.             console.error(err.message);
  85.             callback(err.message, null);
  86.         } else {
  87.             console.log('All proxies fetched successfully.');
  88.             callback(null, rows);
  89.         }
  90.     });
  91. };
  92. // 更新代理转发记录
  93. const updateProxyById = (id, sourceUrl, targetUrl, callback) => {
  94.     db.run(
  95.         `UPDATE proxies SET source_url = ?, target_url = ? WHERE id = ?`, [sourceUrl, targetUrl, id],
  96.         err => {
  97.             if (err) {
  98.                 console.error(err.message);
  99.                 callback(err.message, null);
  100.             } else {
  101.                 console.log(`Proxy with ID ${id} updated successfully.`);
  102.                 callback(null, true);
  103.             }
  104.         }
  105.     );
  106. };
  107. // 根据 ID 删除代理转发记录
  108. const deleteProxyById = (id, callback) => {
  109.     db.run(`DELETE FROM proxies WHERE id = ?`, [id], err => {
  110.         if (err) {
  111.             console.error(err.message);
  112.             callback(err.message, null);
  113.         } else {
  114.             console.log(`Proxy with ID ${id} deleted successfully.`);
  115.             callback(null, true);
  116.         }
  117.     });
  118. };
  119. createTable();
  120. module.exports = {
  121.     insertProxy,
  122.     getProxyById,
  123.     getAllProxies,
  124.     searchProxy,
  125.     updateProxyById,
  126.     deleteProxyById
  127. };
复制代码
当然只有这个还不够，我们还有对应的curd的接口才行。
所以在app.js里面去注册这些接口。
  1. app.get('/logs/proxy', (req, res) => {
  2.     const { keyword = '', offset = 0, limit = 10 } = req.query;
  3.     db.searchProxy(keyword, Number(offset), Number(limit), (err, result) => {
  4.         if (err) {
  5.             console.error(err);
  6.             res.status(500).send('Internal server error.');
  7.         } else {
  8.             res.json({
  9.                 rows: result.proxies,
  10.                 count: result.totalCount
  11.             });
  12.             console.log("当前记录条数：" + result.totalCount)
  13.         }
  14.     });
  15. });
  16. app.post('/logs/proxy', (req, res) => {
  17.     const { sourceUrl, targetUrl } = req.body;
  18.     db.insertProxy(sourceUrl, targetUrl, (err, row) => {
  19.         if (err) {
  20.             console.error(err);
  21.             res.status(500).send('Internal server error.');
  22.         } else {
  23.             res.json(row);
  24.         }
  25.     });
  26. });
  27. app.delete('/logs/proxy/:id', (req, res) => {
  28.     const id = req.params.id;
  29.     db.deleteProxy(id, (err) => {
  30.         if (err) {
  31.             console.error(err);
  32.             res.status(500).send('Internal server error.');
  33.         } else {
  34.             res.status(204).end();
  35.         }
  36.     });
  37. });
复制代码
前端页面

之后，就是我们的前端页面，这个页面的话，好办，我们就直接使用html来写了。 访问/logs 就可以访问页面：
  1. app.get('/logs', (req, res) => {
  2.     res.sendFile(__dirname + '/public/logs.html');
  3. });
复制代码
对应的html代码如下：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>代理日志查看</title>
  6.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" >
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  9.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  10. </head>
  11. <style>
  12.     /* 设置全局字体和颜色 */
  13.     #app {
  14.         margin: 0 auto;
  15.         width: 80%;
  16.     }
  17. </style>
  18. <body>
  19.     <div id="app">
  20.         <h1>代理日志</h1>
  21.         <el-form inline>
  22.             <el-form-item label="关键字">
  23.                 <el-input v-model="keyword" placeholder="输入关键字进行搜索"></el-input>
  24.             </el-form-item>
  25.             <el-form-item>
  26.                 <el-button type="primary" icon="el-icon-search" v-on:click="search">搜索</el-button>
  27.             </el-form-item>
  28.         </el-form>
  29.         <el-table :data="records" stripe>
  30.             <el-table-column prop="id" label="ID" width="100"></el-table-column>
  31.             <el-table-column prop="sourceUrl" label="请求路径" width="300"></el-table-column>
  32.             <el-table-column prop="targetUrl" label="目标地址" width="300"></el-table-column>
  33.             <el-table-column prop="timestamp" label="时间" width="200">
  34.                 <template slot-scope="scope">{{ new Date(scope.row.createdAt).toLocaleString() }}</template>
  35.             </el-table-column>
  36.             <el-table-column label="操作" width="200">
  37.                 <template slot-scope="scope">
  38.           <el-button type="danger" icon="el-icon-delete" v-on:click="removeRecord(scope.row.id)">删除</el-button>
  39.         </template>
  40.             </el-table-column>
  41.         </el-table>
  42.         <el-pagination layout="total, prev, pager, next" :total="total" v-on:current-change="changePage"></el-pagination>
  43.     </div>
  44.     <script>
  45.         const app = new Vue({
  46.             el: '#app',
  47.             data: {
  48.                 records: [],
  49.                 keyword: '',
  50.                 current: 1,
  51.                 pageSize: 10,
  52.                 total: 0
  53.             },
  54.             methods: {
  55.                 search: function() {
  56.                     this.current = 1;
  57.                     this.loadRecords();
  58.                 },
  59.                 removeRecord: function(id) {
  60.                     this.$confirm('确定删除该记录？')
  61.                         .then(() => {
  62.                             axios.delete(`/logs/proxy/${id}`)
  63.                                 .then(() => {
  64.                                     this.loadRecords();
  65.                                     this.$message.success('删除成功！');
  66.                                 })
  67.                                 .catch(() => {
  68.                                     this.$message.error('删除失败！');
  69.                                 });
  70.                         })
  71.                         .catch(() => {});
  72.                 },
  73.                 changePage: function(page) {
  74.                     this.current = page;
  75.                     this.loadRecords();
  76.                 },
  77.                 loadRecords: function() {
  78.                     axios.get('/logs/proxy', {
  79.                             params: {
  80.                                 keyword: this.keyword,
  81.                                 offset: (this.current - 1) * this.pageSize,
  82.                                 limit: this.pageSize
  83.                             }
  84.                         })
  85.                         .then(res => {
  86.                             this.records = res.data.rows;
  87.                             this.total = res.data.count;
  88.                         })
  89.                         .catch(err => console.error(err));
  90.                 }
  91.             },
  92.             mounted: function() {
  93.                 this.loadRecords();
  94.             }
  95.         });
  96.     </script>
  97. </body>
  98. </html>
复制代码
那么之后的话，这个简单的代理转发服务器就写好了。强行加上一层，服了。
以上就是Express代理转发服务器实现的详细内容，更多关于Express代理转发服务器的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/article/284044.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: react echarts tooltip 区域新加输入框编辑保存数据功能

下一篇: react页面中存在多个input时巧妙设置value属性方式

发表于 2023-5-12 17:22:58

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4