背景
我们在前端开发的接口联调阶段，经常会遇到跨域问题，因为本地通常使用localhost域名来启动项目，当然我们可以通过配置host解决这个问题，但当需要访问线上页面的时候，又必须关闭host；我们也可以通过webpack的插件dev-server来配置代理（Proxy），但有时需要和多个服务端研发进行接口联调，因此就需要配置多个Proxy，设置多个虚拟接口前缀，还要考虑发布后线上如何不走代理，整体来说，配置工作是比较麻烦的。
目标
针对以上背景，我们需要一个更加简单灵活的接口代理方案，我们的目标是：
- 接入简单，只需在前端项目中增加少量代码；
- 环境隔离，只针对本地开发环境使用代理，对线上无影像，发布时也无需修改代码；
- 配置灵活：可针对不同接口进行差异化配置，可同时对接多个服务端研发进行联调；
方案
我们在使用webpack的插件dev-server时，本质是本地运行了一个代理服务，前端页面发送的网络请求，实际都是请求了这个代理服务，再由代理服务转发到实际的接口URL上，最后代理服务再将接口返回的数据透传给前端页面。
根据这个原理，我们来自行搭建一个代理服务，也将它在本地运行，来实现同dev-server插件一样的代理过程，但我们会在本方案中引入更加灵活的一种配置方式，也就是通过修改config.json配置文件，来实现更加简化的配置，以及随用随改的灵活特性。
实施
创建NodeJS项目
首先在本地创建一个NodeJS项目（需要安装NodeJS环境，版本建议12+），命名为api-proxy-server，具体步骤略。
温馨提示：本文的代理服务项目源代码，笔者免费提供！只需 点赞+关注 即可在评论区留言索要，留下您的邮箱，笔者会在看到的第一时间发送，项目源代码README文件详细描述了如何使用，方便您快速接入。
编写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 })
以上就是实现前端本地开发接口代理服务的完整思路和过程,更多相关Node 本地开发接口代理 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！