在一个前端项目中如何将指定的接口代理到指定的服务器地址？

作者站长头像
站长
· 阅读数 19

在一个前端项目中如何将 指定的接口 代理到 指定的服务器地址，其他接口不走代理？

我想实现一个可以局部匹配然后代理的功能：

假设一个地址比较长接口 ${SASS_API}/..../user/order/list?abc=abc&abc=abc&abc=abc

可以根据地址中是否存在 /user/order/list 代理请求


// 目标服务器
const MOCK_TARGET = 'www.MOCK_TARGET.com'

// 定义需要代理的接口路径，不需要写全
const mockList = [
    '/user/order/list', 
    .....
]

问题：

  1. 项目启动后会将 mockList 中存在的接口 代理到 MOCK_TARGET

  2. 从MOCK_TARGET获取的数据需要加工一下再返回给前端

    //如：MOCK_TARGET` 返回 { a: 1 } 处理后返回 { code: 200, data: { a: 1 } }

如何简单、方便实现这种功能，用软件、代码实现、chrome功能、或者其他方法实现都可以

回复
1个回答
avatar
test
2024-06-29

用Webpack里的http-proxy-middleware

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = {
  devServer: {
    before: function(app) {
      mockList.forEach((path) => {
        app.use(
          path,
          createProxyMiddleware({
            target: MOCK_TARGET,
            changeOrigin: true,
            onProxyRes: function(proxyRes, req, res) {
              // 在这里修改响应
              var body = [];
              proxyRes.on('data', function(chunk) {
                body.push(chunk);
              });
              proxyRes.on('end', function() {
                body = Buffer.concat(body).toString();
                // 修改响应体
                body = JSON.stringify({ code: 200, data: JSON.parse(body) });
                res.end(body);
              });
            },
          })
        );
      });
    },
  },
};

node里：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

mockList.forEach((path) => {
  app.use(
    path,
    createProxyMiddleware({
      target: MOCK_TARGET,
      changeOrigin: true,
      onProxyRes: function(proxyRes, req, res) {
        // 响应修改逻辑
      },
    })
  );
});

app.listen(3000);
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容