回顾下跨域解决方案http-proxy-middleware
回顾下跨域解决方案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);
我们只是想在自己的express项目使用http-proxy-middleware
,那就可以到此为止了,如果想继续了解http-proxy-middleware
,我们就需要往下看这个createProxyMiddleware
方法。
// node_modules/http-proxy-middleware/dist/index.js
const 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.js
const 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;
终于找到核心实现middleware
了,满足this.shouldProxy
的就会利用this.proxy.web
进行代理了,所以我们如果熟悉http-proxy
的配置的,我们可以直接跳过http-proxy-middleware
来使用http-proxy
,但是好像也没这个必要吧。。。
- 分类:
- Web前端
相关文章
从vuecli3学习webpack记录(四)vue是怎么进行默认配置的
在我们讲到 从vuecli3学习webpack记录(一)vue-cli-serve机制 vue cli3中在commands文件夹里面的是调用api.registerCommand方法,在 阅读更多…
从vuecli3学习webpack记录(二)webpack分析
上一篇里面讲到运行 npm run serve 时运行的是 serveice.run(comand, args, rawArgv) 并且提到它提示返回的是一个promise,所以后面还接着 .cat 阅读更多…
webpack反向代理proxyTable设置
目前各大打包工具在本地开发时都是使用的http-proxy-middleware插件 具体以vue为例,反向代理配置的就是proxyTable proxyTable: { 'ht 阅读更多…
webpack笔记——在html-webpack-plugin插件中提供给其它插件是使用的hooks
最近在这段时间刚好在温故下webpack源码,webpack5都出来了,4还不再学习下? 这次顺便学习下webpack的常用插件html-webpack-plugin。 发现这个插件里面还额外加入了 阅读更多…
以webpack为例来看微内核架构
微内核系统一般分为两个部分—— 核心系统 和 插件系统 ,这样就提供了很好的灵活性和可扩展性。 核心系统是最小可运行的模块,它提供的是通用逻辑(比如Tapable),而插件系统这是些具体的逻辑(比如 阅读更多…
用webpack的require.context优化vue store和router文件
早期右边博文专门讲了下require.context的用法和简单用法介绍《用webpack的require.context() 简化你的代码》 这次说点自己在vue项目中的具体应用吧 store 阅读更多…