回顾下跨域解决方案httpmiddleware

Posted 2023-03-23

参考技术A 我们在React（或Vue）项目本地开发过程中很容易由前端自己解决跨域问题，这里面就用到的是插件 http-proxy-middleware ，它并不是webpack独享的插件，而是一个通用插件，它对 http-proxy 进行了一层封装，更加方便我们使用。

之前刚接触webpack的时候写过一个webpack反向代理proxyTable设置

前几天有个测试同事找我解决她的跑的本地项目测试公司项目时，出现跨域的情况，因为前端项目不是spa项目，没有webpack之类的，所以就准备参照 http-proxy-middleware 来实现。

我们看看 http-proxy-middleware 的源码，目前它的最新版本是2.0.6，貌似2.x版本和1.x版本导出的方法有所不同

先看看npm官网的示例介绍

所以核心 createProxyMiddleware 方法，我们继续看

继续看这个 middleware 是怎么实现的。

终于找到核心实现 middleware 了，满足 this.shouldProxy 的就会利用 this.proxy.web 进行代理了，所以我们如果熟悉 http-proxy 的配置的，我们可以直接跳过 http-proxy-middleware 来使用 http-proxy ，但是好像也没这个必要吧。。。