webpack-dev-server文档:https://webpack.docschina.org/configuration/dev-server/
body-parser https://github.com/expressjs/body-parser
http-proxy-middleware https://github.com/chimurai/http-proxy-middleware

2019-12-05,经过测试,webpack-dev-server@3.9.0 当前版本还是存在这个问题。

1 错误场景

webpack.config里面配置DevServer时,在proxy中间件前面加入了body-parser中间件,导致无法正常转发post请求。

image.png

2 解决

把before移到after,在proxy之后再加入body-parser中间件。

before,在服务内部的所有其他中间件之前, 提供执行自定义中间件的功能。
after,在服务内部的所有其他中间件之后, 提供执行自定义中间件的功能。

3 相关issues

3.1 http-proxy-middleware#215

https://github.com/chimurai/http-proxy-middleware/issues/215

Some issues might occur if your using body-parser for example

image.png

3.2 http-proxy-middleware#232

添加中间件时,在http-proxy-middleware前面加入了body-parser中间件,导致无法rewrite post请求,
这里有一个相关的issue https://github.com/chimurai/http-proxy-middleware/issues/232

image.png

3.3 use bypass to transform POST to GET

302
https://github.com/chimurai/http-proxy-middleware/issues/302

  1. proxy: {
  2. target: 'http://localhost:3000',
  3. pathRewrite: {'\\?.*$': ''},
  4. bypass: function(req, res, proxyOptions) {
  5. if(req.method === 'POST'){
  6. req.method = 'GET';
  7. }
  8. return req.url;
  9. }
  10. }