回顾下跨域解决方案http-proxy-middleware

我们在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官网的示例介绍

const express = require('express');const { createproxyMiddleware } = require('http-proxy-middleware');const app = express();app.use('/api', createproxyMiddleware({ target: 'http://www.example.org', changeOrigin: true }));app.listen(3000);

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

// node_modules/http-proxy-middleware/dist/index.jsconst http_proxy_middleware_1 = require("./http-proxy-middleware");function createproxyMiddleware(context, options) { const { middleware } = new http_proxy_middleware_1.HttpproxyMiddleware(context, options); return middleware;}exports.createproxyMiddleware = createproxyMiddleware;

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

// node_modules/http-proxy-middleware/dist/http-proxy-middleware.jsconst httpproxy = require("http-proxy");class HttpproxyMiddleware { constructor(context, opts) { this.logger = (0, logger_1.getInstance)(); this.wsInternalSubscribed = false; this.serverOnCloseSubscribed = false; // http://github.com/Microsoft/TypeScript/wiki/'this'-in-TypeScript#red-flags-for-this this.middleware = async (req, res, next) => { var _a, _b; if (this.shouldproxy(this.config.context, req)) { try { const activeproxyOptions = await this.prepareproxyRequest(req); this.proxy.web(req, res, activeproxyOptions); } catch (err) { next(err); } } else { next(); } }) this.proxy = httpproxy.createproxyServer({}); ...}exports.HttpproxyMiddleware = HttpproxyMiddleware;

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