我們?cè)赗eact（或Vue）項(xiàng)目本地開發(fā)過程中很容易由前端自己解決跨域問題，這里面就用到的是插件http-proxy-middleware，它并不是webpack獨(dú)享的插件，而是一個(gè)通用插件，它對(duì)http-proxy進(jìn)行了一層封裝，更加方便我們使用。
之前剛接觸webpack的時(shí)候?qū)戇^一個(gè)webpack反向代理proxyTable設(shè)置
前幾天有個(gè)測試同事找我解決她的跑的本地項(xiàng)目測試公司項(xiàng)目時(shí)，出現(xiàn)跨域的情況，因?yàn)榍岸隧?xiàng)目不是spa項(xiàng)目，沒有webpack之類的，所以就準(zhǔn)備參照http-proxy-middleware來實(shí)現(xiàn)。
我們看看http-proxy-middleware的源碼，目前它的最新版本是2.0.6，貌似2.x版本和1.x版本導(dǎo)出的方法有所不同
先看看npm官網(wǎng)的示例介紹
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方法，我們繼續(xù)看
// 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;
繼續(xù)看這個(gè)middleware是怎么實(shí)現(xiàn)的。
// 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; // https://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;
終于找到核心實(shí)現(xiàn)middleware了，滿足this.shouldProxy的就會(huì)利用this.proxy.web進(jìn)行代理了，所以我們?nèi)绻煜ttp-proxy的配置的，我們可以直接跳過http-proxy-middleware來使用http-proxy，但是好像也沒這個(gè)必要吧。。。
