webpack-dev-server是一个基于webpack-dev-middleware的简易Node Express服务器程序. 它集成了http-proxy-middleware, 后者提供proxy, 让我们可以做API中转.

比方说, 我的前端在localhost:8080, 后端在localhost:3000. 我想让所有API请求都发送至localhost:8080/api/*, 然后转发至localhost:3000/api/*. 只需要在webpack-dev-server中配置

proxy: {
    '/api': 'http://localhost:8080'
}

即可.

如果想把localhost:8080/api/*请求转发到localhost:3000/*(略去中间的"/api"), 需要:

proxy: {
  '/api': {
    target: 'http://localhost:3000',
    pathRewrite: {'^/api': ''}
  }
}

一个小坑

我使用的是Git Bash for Windows, webpack-dev-server版本为2.9.7.

$ npm show webpack-dev-server version
2.9.7

我发现我修改了配置之后, ctrl+c杀掉webpack-dev-server然后重启, 配置并没有生效, 还是没有proxy.

后来才发现, 是因为在Git Bash for Windows上, webpack-dev-server用ctrl+c杀掉后会残留一个Node进程继续做网页的server. 这个没被杀死的进程占用了端口8080. 我重启webpack-dev-server时实际上使用了另一个端口如8081, proxy在8081端口上是生效的, 但是在8080端口上还是没有. 这个问题在CMD里面没有.

之前就注意到了webpack-dev-server的这个bug, 没想到在这个点上给自己留了个坑, 费了不少时间.

我在后台使用的nodemon上也有类似的问题, 但是通过用fork替换spawn的方式解决了.

参考文档:

1. webpack-dev-server: proxy
2. http-proxy-middleware