在前端开发中，经常会出现需要使用代理来解决跨域请求的问题，常见的代理方式就是使用 http-proxy-middleware 模块来实现代理，但是有时候我们还需要将本地的接口映射到公网上，这时候就需要 http-port-proxy 模块。本文将详细介绍 npm 包 http-port-proxy 的使用方法，并提供示例代码以供参考。
http-port-proxy 的安装
在使用 http-port-proxy 之前，需要先安装该模块。可以使用 npm 来安装 http-port-proxy。在命令行中输入以下命令即可：
npm install -g http-port-proxy
http-port-proxy 的使用方法
使用 http-port-proxy 主要有两个步骤：
- 在终端中启动 http-port-proxy
在终端中使用以下命令启动 http-port-proxy：
http-port-proxy <remoteServerUrl> <localPort>
其中，remoteServerUrl 表示远程服务器地址，localPort 表示本地端口号。比如说，要将本地的 3000 端口映射到公网上的 test.com 服务器的 80 端口，可以使用以下命令：
http-port-proxy test.com:80 3000
- 在前端代码中进行接口调用
在前端代码中对本地接口的请求地址做修改，将 localhost:3000 变更成 test.com 即可完成接口的转发。
-- -------------------- ---- ------- -- ------ ----- ------- - --------------------------- -- -------- ----- ------------- - --------------------- -- ---- -------------------- -------------- -- ---------------- ---------- -- ------------------
http-port-proxy 的几个参数
在启动 http-port-proxy 时，可以传递一些参数来自定义 http-port-proxy 的行为。
- 指定本地 ip 地址
在本机同时拥有多个网卡时，可以通过指定本地 ip 地址来选择使用哪个网卡进行转发。例如：
http-port-proxy test.com:80 3000 --local-ip 192.168.0.2
- 启用日志
可以通过 --log 来启动日志来查看 http-port-proxy 的运行情况：
http-port-proxy test.com:80 3000 --log
结语
通过上述示例，我们可以看到 http-port-proxy 模块的用法非常简单，只需要在终端中执行一个命令即可快速实现端口映射。对于对接口调用有一定要求的前端开发人员而言，使用 http-port-proxy 可以极大地提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664e81e8991b448e2706