随着前端开发中涌现的各种框架和库，我们开始越来越多地依赖各种第三方包来构建项目。在这个过程中，我们需要在本地开发环境中设置一些代理，以便于本地测试和调试。这时候，npm 包 di-proxy 就成为了一个简单、易用的代理工具。
di-proxy 的介绍
di-proxy 是一个基于 node.js 的本地代理工具。它可以将本地请求通过中转服务器发送到远程服务器，同时将响应内容返回本地并进行数据的拦截和修改。
di-proxy 的主要功能包括：
- 实现本地和远程服务器之间的代理
- 支持跨域访问和拦截
di-proxy 的安装和配置
安装：
npm install di-proxy --save-dev
配置文件：
在本地项目目录中新建一个名为 di-proxy.config.js 的文件，配置内容如下：
-- -------------------- ---- -------
-------------- - -
------- -----
------- ------------
------------ -
-
--------- -----
---------- -
------
--
--------- ---------------------------
--------------- -----
-------------- -
-------- --
-
-
-
-在 proxyList 中添加需要进行代理的服务器代理配置，具体配置说明如下：
enable：是否启用代理（true/false）context：需要进行代理的请求路径target：远程服务的地址changeOrigin：是否进行跨域访问pathRewrite：对请求路径进行重写
di-proxy 的使用
以 vue-cli 项目为例，需要在 package.json 中添加以下配置：
"scripts": {
"dev": "vue-cli-service serve --open",
"proxy": "di-proxy -c di-proxy.config.js",
"build": "vue-cli-service build"
}在命令行中运行 npm run proxy 启动代理服务，同时运行 npm run dev，即可在开发过程中使用 di-proxy 进行代理。
di-proxy 的示例代码
在本地 vue-cli3 项目中需要代理请求到远程服务器（例如：http://remote.server/api）。
首先，在 di-proxy.config.js 文件中添加以下配置：
-- -------------------- ---- -------
-------------- - -
-- ---------
------------ -
-
--------- -----
---------- -
------
--
--------- ---------------------------
--------------- -----
-------------- -
-------- --
-
-
-
-在 vue 项目中发起请求时，将请求地址改为代理地址即可：
axios.get('/api/users').then((res) => {
console.log(res);
})以上示例代码即可实现对远程服务器 /api/users 路径的请求代理。
总结
di-proxy 是一个基于 node.js 的简单易用的本地代理工具，在前端开发过程中可以帮助我们轻松实现对远程服务器进行请求代理，同时更便于进行测试和调试。配置简单、操作便捷，是前端开发中很不错的一个工具，值得推荐使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ad81e8991b448dfeac