我们在做前端开发的时候，经常会遇到程序已经就绪但是后端api接口还没好的这种情况，这极大的影响了效率。为了提高开发效率，本文将介绍一种自己搭建代理服务器的方法，如果你的项目使用browser-sync作为开发的web serve那么不妨看下接下来介绍的内容

browser-sync

browser-sync是一个在前端开发中，可以监听文件的修改自动刷新浏览器的web serve开源应用，它基于express开发，在express中有一个中间件的概念，他把来自web的请求处理都放在了一个函数中：

1
2
3
4
5
function middleware(request, response, next){
	// request 表示web请求，里面存放了 http request的各种信息 
	// response 表示对这次请求的返回
	// next 表示调用下一个中间件，当response.end()时，将自动停止调用
}

express就是通过一个个的中间件来对每一个请求做处理并返回。
browser-sync的配置项中也有middleware，接下来介绍的代理方法就是通过他实现的。

http-proxy-middleware

node.js的流行离不开npm，在npm上有着无数开发者贡献的扩展包，他们的源代码基本上都能在github上找到,避免重复造轮子也是提高开发效率的方法之一，当我们知道了上述的知识后，我们就可以打开github在其中搜索关键字node,proxy,middleware，然后按照start数排序，排在前面的基本上就是我们要找的了。

实战

接下来我们看一下http-proxy-middleware是如何在browser-sync中工作的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var browserSync = require('browser-sync').create()
var proxy = require('http-proxy-middleware')
// 设置代理
var middleware = proxy('**', {target: 'https://api.github.com', changeOrigin: true,});
function Server() {
	var bs = browserSync.init({
		port: 3700,
		server: {
			directory: true,
			baseDir: ['./']
		},
		middleware: [middleware]
	})
}
Server();

直接运行你会看到https://api.github.com返回的内容，此时代理已经成功。

有时，我们在开发的过程中可能会遇到更复杂的情况，比如接口a1要代理到api A接口a2要代理到api B，这种情况也可以通过配置http-proxy-middleware解决，我们看下例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var browserSync = require('browser-sync').create()
var proxy = require('http-proxy-middleware')
var proxyTable = {
	'/test': 'http://localhost:6000',
}
// 设置代理
var middleware = proxy('**', {
	target: 'https://api.github.com',
	changeOrigin: true,
	logLevel: 'debug',
	pathRewrite: {
        '^/test/testa' : '/apiA',
        '^/test/testb' : '/apiB'
    },
	router: proxyTable,
});
function Server() {
	var bs = browserSync.init({
		port: 3700,
		server: {
			directory: true,
			baseDir: ['./'],
		},
		open: false,
		middleware: [middleware],
	})
}
Server();

通过配置pathRewrite和router，我们可以访问localhost:3700/test/testa 它将会代理到http://localhost:6000/apiA
以上是一些可能常用的选项如果希望了解更多可以参考http-proxy-middleware。

通过代理我们还可以结合rap搭建一个前端的mock server。有兴趣的同学可以研究一下。