在前端开发中，经常需要将本地的 API 请求代理到远程服务器上，这时候就可以使用 proxy-middleware 这个 npm 包来实现。proxy-middleware 可以让我们非常方便地配置代理规则，从而避免了 CORS 的问题。
安装
使用 npm 安装 proxy-middleware：
npm install --save-dev proxy-middleware
使用方法
基本用法
首先引入 http-proxy-middleware：
const { createProxyMiddleware } = require('http-proxy-middleware');然后按照以下方式设置代理：
-- -------------------- ---- -------
-------------- - ------------- -
--------
-------
-----------------------
------- ------------------------
------------- -----
--
--
--上面的代码表示将 /api 路径下的所有请求代理到 http://localhost:3000 上，并且将请求头中的 Host 字段修改为目标服务器的地址。
高级用法
除了基本用法外，proxy-middleware 还支持一些高级功能。下面是一些示例：
重写路径
如果需要重写路径，可以使用 pathRewrite 选项：
-- -------------------- ---- -------
--------
-------
-----------------------
------- ------------------------
------------- -----
------------ -
-------- ------
--
--
--上面的代码表示将 /api 路径下的所有请求代理到 http://localhost:3000/v1 上。
自定义代理请求头
如果需要自定义代理请求头，可以使用 headers 选项：
-- -------------------- ---- -------
--------
-------
-----------------------
------- ------------------------
------------- -----
-------- -
------------ ------------
--
--
--上面的代码表示在代理请求头中添加一个名为 X-Real-IP 的字段，值为 127.0.0.1。
动态配置代理目标
有时候需要动态配置代理目标，可以使用 router 选项：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
--------
-------
-----------------------
------- ----- ---- -- -
------ ------------------------
--
------------- -----
--
--
-----------------上面的代码表示将 /api 路径下的所有请求根据请求参数动态地选择代理目标。
参考资料
总结
proxy-middleware 是一款非常实用的 npm 包，可以方便地解决前端开发中的 CORS 问题。本文介绍了 proxy-middleware 的基本使用方法和一些高级功能，并包含了示例代码，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/44738