解决webpack dev-server无法匹配POST请求的方法

问题背景

webpack的dev-server默认只支持GET请求，这在本地模拟数据接口时会造成不便。

解决方案一：配置devServer

可以通过以下两种方法解决该问题：

第一种方法是在webpack.config.js配置文件的devServer字段中添加如下配置：

devServe:{
  setup: (app) => {  //解决post没响应的问题
       app.post('/goform/**', function(req, res) {
       res.redirect(req.originalUrl); //重定向到对应路径
    });
  }
}

版本注意事项

注意：在webpack 3.0之后的版本中，setup配置项需改为before。

解决方案二：修改源码

第二种方法是直接修改node_modules目录下的webpack-dev-server/lib/server.js文件。找到Server函数定义处，大约在100行左右的位置，添加如下代码以拦截POST请求。路径可根据实际需求自定义，也可参照上述配置方式处理。

app.post('/goform/*', (req, res) => {
res.setHeader('Content-Type', 'text/plain;charset=UTF-8');
let filename = path.join(__dirname,'..','..','..',`public/${req.originalUrl}.txt`);

fs.exists(filename, exists => {
 if(exists) {
  fs.createReadStream(path.join(__dirname,'..','..','..',`public/${req.originalUrl}.txt`)).pipe(res);
 }else {
  res.end(`${req.originalUrl}' <- <- 老铁，这个接口你还没写。`);
 }
});

以上为本文全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持本站。