当我们需要开发基于前端的应用时，往往需要和后端进行数据交互。但是有时候我们并不能直接访问后端服务器，这时候就需要用到前端代理技术。今天我们要介绍的是一个非常好用的前端代理 npm 包：mim-json-proxy。
mim-json-proxy 是什么？
mim-json-proxy 是一个可以代理服务器端接口的 npm 包。它可以帮助开发者快速搭建一个代理服务器，将前端页面向本地服务器发起请求时，将请求转发至远程服务器。
安装 mim-json-proxy
可以使用 npm 包管理器来安装 mim-json-proxy，打开终端（Windows下是 cmd 或 PowerShell），执行以下命令：
npm install mim-json-proxy --save-dev
这里我们使用 --save-dev 参数是为了将该包添加至 devDependencies 下面，而不是全局安装该包。
使用 mim-json-proxy
在项目根目录下创建代理服务器配置文件 proxy.config.js ，并在该文件中添加如下代理配置信息：
-- -------------------- ---- -------
-------------- - -
-
----- -------
--------- -------
----- ------------------
----- ---
----- -------
----- ------
-
--上述代码中，代理服务器的接口将会被代理至 http://www.example.com:80/api 。其中，name 可以随意指定，protocol 为访问后端接口的协议类型（http 或 https），host 是代理服务器的主机名，port 是代理服务器的端口号，path 是代理服务器的路径，rule 是匹配请求路径的规则。
接下来，在 package.json 文件中添加如下代码：
"scripts": {
"start": "mim-json-proxy"
}在终端运行以下命令即可启动前端代理服务器：
npm run start
示例代码
下面是一个简单的示例，我们要获取后端服务器的列表数据，实现前端页面的展示。
-- -------------------- ---- -------
-- ----------
--------- -----
------
------
-----------------------------
-------
------
------ -----------
-------
----
-------------
------------
----------------
-----
--------
-------
--------
--------
------- --------------------------
-------
-------
-- --------
-------------------------------- ---------- -
------ ----------------
---------------- ------ -
--- ----- - ------------------------------ --------
--------------------- ------ -
--- -- - -----------------------------
--- --- - -----------------------------
--- --- - -----------------------------
--- --- - -----------------------------
--------------- - ----------
--------------- - ---------
--------------- - -------------
--------------------
--------------------
--------------------
----------------------
---
----------------- ------- -
---------------------
---这里我们使用了 fetch API 来请求数据，并使用 document.createElement() 方法来创建对应的 DOM 元素，最后将创建的元素添加至页面中。而后端接口的地址则是 /api/list 路径。
结束语
理解并掌握前端代理技术是前端开发的一项基础技能，而 mim-json-proxy 则为我们提供了一个非常好的代理工具。希望本文对初学者有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d092702382260d