简单易用的前端本地开发接口代理服务

背景

我们在前端开发的接口联调阶段，经常会遇到跨域问题，因为本地通常使用localhost域名来启动项目，当然我们可以通过配置host解决这个问题，但当需要访问线上页面的时候，又必须关闭host；我们也可以通过webpack的插件dev-server来配置代理（Proxy），但有时需要和多个服务端研发进行接口联调，因此就需要配置多个Proxy，设置多个虚拟接口前缀，还要考虑发布后线上如何不走代理，整体来说，配置工作是比较麻烦的。

目标

针对以上背景，我们需要一个更加简单灵活的接口代理方案，我们的目标是：

• 接入简单，只需在前端项目中增加少量代码；
• 环境隔离，只针对本地开发环境使用代理，对线上无影像，发布时也无需修改代码；
• 配置灵活：可针对不同接口进行差异化配置，可同时对接多个服务端研发进行联调；

方案

我们在使用webpack的插件dev-server时，本质是本地运行了一个代理服务，前端页面发送的网络请求，实际都是请求了这个代理服务，再由代理服务转发到实际的接口URL上，最后代理服务再将接口返回的数据透传给前端页面。

根据这个原理，我们来自行搭建一个代理服务，也将它在本地运行，来实现同dev-server插件一样的代理过程，但我们会在本方案中引入更加灵活的一种配置方式，也就是通过修改config.json配置文件，来实现更加简化的配置，以及随用随改的灵活特性。

实施

创建NodeJS项目

首先在本地创建一个NodeJS项目（需要安装NodeJS环境，版本建议12+），命名为api-proxy-server，具体步骤略。

编写Express服务

我们的代理服务使用Express框架来开发（需要安装依赖），也可以根据个人习惯使用其他框架，比如KOA、Egg.js等。

首先在项目主文件中导入相关依赖：

const express = require('express');
const http = require('http');
const bodyParser = require('body-parser');
const app = express();

然后使用bodyParser对请求数据进行解析：

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

接下来这一步很关键，就是要允许跨域，我们要允许所有域名和请求的访问，具体设置如下：

app.all('*', (req, res, next) => {
  res.header('Access-Control-Allow-Origin', req.headers.origin);
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTION');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header('X-Powered-By', '3.2.1');
  next();
});

然后我们给这个服务编写默认的路由（也可以理解为接口，对于前端来说，服务端提供的路由都可以视为接口），默认的路由我们定义为GET请求，方便我们在浏览器直接访问，来验证服务是否成功启动。

Express挂载路由的方式如下：

app.get('/', (req, res) => {
  res.send('Hello, Welcome use api proxy.');
});

最后，我们来编写启动服务的代码，如下：

const port = 8080;
http.createServer(app).listen(port);
console.log(`http://127.0.0.1:${port} 服务已启动`);

按照以上步骤编写完代码后，启动服务，在浏览器中访问http://127.0.0.1:8080，如果看到浏览器显示“Hello, Welcome use api proxy.”说起服务启动成功了。

关于如何启动服务，笔者的做法是，在package.json中配置启动脚本dev，然后运行npm run dev即可，也可以通过pm2进程守卫插件（需要安装依赖）来启动服务，这样做的好处是可以在程序报错时，保证服务不会停止。

启动脚本配置如下：

"scripts": {
    "start": "pm2 start ./src/server.js",
    "stop": "pm2 stop ./src/server.js",
    "dev": "node ./src/server.js"
},

编写代理接口

在上述步骤中，我们已经可以启动代理服务，并编写了一个默认的GET路由（接口），接下来我们来实现本文的核心内容，编写一个POST类型的接口，用于对前端接口请求进行代理。

为了方便后续的维护和扩展，我们将代理接口的源代码编写到一个独立的文件中，目录为src/routes/api，文件名为index.js，然后在主文件中导入并挂载路由即可，代码如下：

const api = require('./routes/api');
// ......
app.post('/api', api);

注意：代理接口的路由我们定义为/api，因此在前端项目中调用这个服务的完整路径就是http://127.0.0.1:8080/api，这个接口只能通过axios来访问，因为它是POST类型的，不支持浏览器访问验证。

我们打开src/routes/api/index.js文件来编写具体的代码，首先导出一个基本的路由函数：

const axios = require("axios");
const qs = require("qs");
const fs = require("fs");
const fspath = require("path");

module.exports = (req, res) => {
  // ......
}

在这个函数内，我们来处理前端请求，先从请求体中获取参数:

const { path, params } = req.body;

其中path指定了要访问哪个服务端接口路径，params是要透传给服务端的实际入参。

然后我们在src/routes/api/目录下，创建一个接口配置文件config.json，这个配置文件维护了默认的服务端接口域名或IP地址，以及默认的请求方式和数据类型。具体定义如下：

属性名	说明	示例
baseUrl	服务端接口默认地址	http://192.168.1.17
method	请求方式，默认是POST	GET / POST
contentType	数据类型，默认是json	form / json

继续编写代码，来读取这个config.json配置文件，代码如下：

// 读取接口配置文件
const configPath = fspath.resolve(process.cwd(), './src/routes/api/config.json');
if (!fs.existsSync(configPath)) {
  res.json({ code: '-1', msg: '接口配置文件不存在！' });
  return;
}
const configStr = fs.readFileSync(configPath, { encoding: 'utf-8' });
let config = null;
try {
  config = JSON.parse(configStr);
} catch (error) {
  res.json({ code: '-1', msg: '接口配置文件格式有误，解析失败！' });
  return;
}
// 获取接口默认配置
let { baseUrl, method='POST', contentType='json', extra=[] } = config;

代码写到这里，我们已经拿到了真实的服务端接口地址、请求类型以及数据类型，然后就可以通过axios来发送请求了，但这样并不支持个别请求的差异化，比如有的接口需要跟另外的服务端研发联调，也就是baseUrl不同、有的接口请求类型是GET，有的接口请求的数据类型是application/x-www-form-urlencoded，因此我们需要一种机制来实现对差异化接口的配置，我们继续改写config.json文件，加入extra数组，在这个数组中，我们放入一组对象，来定义个别接口的差异化属性，具体定义如下：

属性名	说明	示例
path	接口路径（必填），需要差异化配置的接口	/user/permision
baseUrl	服务端接口地址（选填）	http://192.168.1.16
method	请求方式（选填）	GET / POST
contentType	数据类型（选填）	form / json

有了以上配置，我们就可以遍历extra数组，如果当前接口请求的path在其中，就需要按照差异化的配置发送请求，具体代码如下：

// 获取额外的接口配置
if (extra.length > 0) {
  const extraCfg = extra.find(item => item.path === path);
  if (extraCfg) {
    baseUrl = extraCfg.baseUrl || baseUrl;
    method = extraCfg.method || method;
    contentType = extraCfg.contentType || contentType;
  }
}

最后我们使用axios来发送请求到实际的服务端接口地址，然后将返回的数据下发给前端页面即可。代码如下：

const url = baseUrl + path;
const headers = {};
if (contentType === 'form') {
  headers['Content-Type'] = 'application/x-www-form-urlencoded';
}
axios({
  method,
  url,
  headers,
  timeout: 3000,
  data: contentType === 'form' ? qs.stringify(params) : params
}).then(result => {
  res.json(result.data);
  Log.api(url, params, result.data);
}).catch(error => {
  res.json({ code: '-1', msg: '网络错误' });
  Log.api(url, params, '网络错误');
});

代码中的Log是用来记录日志的，方便我们追踪代理服务的运行情况，具体实现可查看本项目源代码。

至此我们的代理服务就开发完成了，运行这个服务，我们就可以在前端项目中接入并使用它了。注意：当我们修改了config.json文件后，保存即可，不需要重启服务。如果电脑关机重启了，则需要手动启动代理服务。

前端项目接入

在前端项目封装axios请求的地方，判断如果是本地开发环境，则将URL指向此服务，并对入参进行简单包装即可。由于我们只对本地环境做了接口代理，因此发布项目时无需任何修改，发布后的版本仍会调用实际的服务端接口。

代码示例：

let baseUrl = 'http://api.xyz.com'; // 线上接口域名
let data = { a: 1 } // 接口入参
let path = '/user/permision'; // 实际的接口路径
let url = baseUrl + path; // 请求的完整接口url

if (process.env.NODE_ENV === 'development') {
  url = 'http://127.0.0.1:8080/api';
  data = { path, params: data }
}

// 发送请求
axios({ url, data })

以上就是实现前端本地开发接口代理服务的完整思路和过程，如有任何问题，欢迎在评论区留言讨论。

需要源码的朋友， 点赞+关注 然后评论区留下邮箱。