如何让 webpack-dev-server 接受 POST 请求

Question

在我的项目中我调用：

$ webpack-dev-server --history-api-fallback

然后它启动了一个快速服务器（我假设）在 localhost:8080 上可用。

除了我想通过 POST 将表单提交到加载我的应用程序的 iframe 之外，它工作得很好； localhost:8080 正在开发中，其他内容正在制作中。

我不希望在开发中对 POST 数据做任何事情，但在生产中，它需要 POST。

然而，当我尝试使用 POST 时，它 cannot find POST /

是否有允许我使用 webpack-dev-server 的配置选项或其他解决方案？（我真的不想为此编写自己的服务器）。

Answer 1

您要找的是devServer。在下面你可以看到我的配置。在 setup(app) 下你可以添加任何你想要的 "almost":

module.exports = {
    ...,
    devServer: {
        inline: true,

        port: 3000,

        publicPath: '/',

        setup(app){

            var bodyParser = require('body-parser');    
            app.use(bodyParser.json());

            app.get("/get/some-data", function(req, res){
                console.log(req);
                res.send("GET res sent from webpack dev server")
            })

            app.post("/post/some-data", bodyParser.json(), function(req, res){
                console.log(req.body);
                res.send("POST res sent from webpack dev server")
            })
        }
    }
}

编辑： 如果您想看得更清楚些，我已将简约的 example 推到 github。

Answer 2

@cowCrazy 讲了一半的故事，但没有说明在 POST 的情况下如何用相同的 GET 响应来响应，这正是我要找的。

在 Webpack 配置中，您可以这样做：

module.exports = {
    ...,
    devServer: {
        setup(app) {
            app.post('*', (req, res) => {
                res.redirect(req.originalUrl);
            });
        },
    }
}

这将只获取 POST URL 并使用相同的 URL 重定向，使其成为 GET 请求。

它不会出现服务器错误，而是使用 GET 重定向。

Answer 3

检查它是否通过将 POST 请求转换为 GET 请求来解决您的问题：

bypass: function (req, res, proxyOptions) {

      const url = req.url;
      req.method = 'GET';
      if (url.indexOf('?') > -1) {

        return url.replace('?', '.json?');
      } else {

        return url + '.json';
      }
    }

如何让 webpack-dev-server 接受 POST 请求

How do I get webpack-dev-server to accept POST requests

post

webpack

webpack-dev-server