当我们进行前端开发时，经常需要向后端请求 API 接口数据，但是通常情况下，我们的开发环境和线上环境不一样，造成了本地开发时无法直接请求到线上接口的情况。此时就需要一个代理工具，将本地请求转发到相应的后端接口上。
在前端开发中，有很多种代理工具，其中一款优秀的工具是 parallel-proxy。在这篇文章中，我们将学习使用 parallel-proxy 进行代理转发的方法，并探究其原理及优势。
parallel-proxy 的安装
在使用 parallel-proxy 前，需要先进行安装。在命令行中输入以下命令即可完成安装：
--- ------- -------------- ----------
安装完成后，我们就可以开始使用 parallel-proxy 进行开发。
parallel-proxy 的基本用法
parallel-proxy 的基本用法非常简单。我们只需要在项目根目录下创建一个名为 proxyConfig.json 的文件，并在其中写入需要代理的 API 接口信息即可。
proxyConfig.json 的格式如下：
-
------- -
--------- ------------------------
--------------- ----
--
-------------- -
--------- ------------------------
--------------- ----
-
-上述配置将 /api 和 /api/second 这两个路由代理到了不同的本地服务上。其中，target 表示需要转发到的地址，changeOrigin 表示代理时是否需要更改请求头中的 origin 字段，将其更改为代理地址。
在配置完成后，我们只需要在命令行中输入以下命令，即可启动代理服务。
--- -------------- ------------------
在服务启动后，即可通过代理地址进行 API 请求。
parallel-proxy 的高级用法
除了基本的用法，parallel-proxy 还支持一些高级用法，例如路由重写和反向代理等功能。
路由重写
有时候，在代理请求到后端服务时，我们需要修改请求的路径。此时，我们就可以使用 parallel-proxy 提供的路由重写功能。
例如，我们需要将请求 /api/old 路径转发到后端服务的 /api/new 路径上，我们可以这样进行配置：
-
----------- -
--------- ------------------------
--------------- -----
-------------- -
------------ ----------
-
-
-在上述配置中，pathRewrite 表示需要进行路径重写。"^/api/old" 表示匹配需要重写的路径，"/api/new" 表示重写后的路径。
反向代理
除了正向代理，parallel-proxy 还支持反向代理。当我们需要对外提供服务时，可以使用反向代理将请求转发到内部的服务上。
反向代理的配置和正向代理几乎一样，只是需要将 target 改为内部服务的地址。
例如，我们需要将请求转发到内部服务的 8080 端口上，可以这样进行配置：
-
------- -
--------- ------------------------
--------------- ----
-
-parallel-proxy 的优势及指导意义
在开发过程中使用 parallel-proxy 可以提高开发效率，让我们更轻松地进行前后端联调。同时，parallel-proxy 支持路由重写和反向代理等高级功能，让我们在实际开发中更加灵活。
总之，parallel-proxy 是一个非常实用的代理工具，值得前端开发者掌握和使用。
示例代码
在实际开发中，我们可以使用以下示例代码进行测试和学习。
proxyConfig.json 文件：
-
------- -
--------- ------------------------
--------------- -----
-------------- -
------------ ----------
-
-
-运行代理服务命令：
--- -------------- ------------------
在代码中发起请求：
----------------- -------------- -- ---------------- ---------- -- -------------------
以上代码将会通过 parallel-proxy 代理到 http://localhost:3000/api/new 上，并返回该路径的返回值。同时，代理服务将会根据 pathRewrite 的配置将请求中的 /api/old 替换为 /api/new。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671d730d0927023822d7b