背景
我们在前端开发的接口联调阶段，经常会遇到跨域问题，因为本地通常使用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在其中，就需要按照差异化的配置发送请求，具体代码如下：
app.use(bodyParser.urlencoded({ extended: false }));app.use(bodyParser.json());0最后我们使用axios来发送请求到实际的服务端接口地址，然后将返回的数据下发给前端页面即可。代码如下：
app.use(bodyParser.urlencoded({ extended: false }));app.use(bodyParser.json());1代码中的Log是用来记录日志的，方便我们追踪代理服务的运行情况，具体实现可查看本项目源代码。
至此我们的代理服务就开发完成了，运行这个服务，我们就可以在前端项目中接入并使用它了。注意： 当我们修改了config.json文件后，保存即可，不需要重启服务。如果电脑关机重启了，则需要手动启动代理服务。
前端项目接入
在前端项目封装axios请求的地方，判断如果是本地开发环境，则将URL指向此服务，并对入参进行简单包装即可。由于我们只对本地环境做了接口代理，因此发布项目时无需任何修改，发布后的版本仍会调用实际的服务端接口。
代码示例：
app.use(bodyParser.urlencoded({ extended: false }));app.use(bodyParser.json());2以上就是实现前端本地开发接口代理服务的完整思路和过程，如有任何问题，欢迎在评论区留言讨论。
需要源码的朋友，点赞+关注 然后评论区留下邮箱。