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

Question

在我的项目中，我调用：

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

它启动了一个express服务器（我假设）可在localhost:8080上使用。

它的工作很好，除了我想通过POST提交一个表单到一个加载我的应用程序的iframe；在开发中是localhost:8080，在生产中是其他地址。

我不希望在开发中处理那个POST数据，但在生产中，它需要是POST。

然而，当我尝试使用POST时，它显示“cannot find POST /”。

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

- Kevin Beal

Answer 1

@cowCrazy只提供了一半的信息，没有说明在POST情况下如何使用相同的响应来进行回应，而这正是我在寻找的。

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

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

这将仅接受POST URL并重定向到相同的URL，使其成为GET请求。

与服务器错误不同，它将通过GET重定向。

- Kevin Beal

---

根据文档，setup已被弃用，推荐改用before：https://webpack.js.org/configuration/dev-server/#devserversetup - lazaruslarue

Answer 2

你需要的是 devServer。以下是我的配置文件，你可以在 setup(app) 下添加几乎任何内容：

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")
            })
        }
    }
}

编辑： 如果您想更好地了解，我已经将一个简约的示例推送到GitHub上。

- U Rogel

---

webpack.devServer.setup.js 里面有什么内容？我对 express 或者 webpack-dev-server 对其的使用并不是很熟悉。 - Kevin Beal

在那里，你可以构建一个完整的Express服务器，你可以使用它来拥有app.post和其他API功能。在我的项目中，我几乎将其复制为prod server.js的副本，只是没有访问express变量。 - U Rogel

你能给我一些示例代码吗？我的后端不是一个express应用程序，我不知道该如何响应请求。 - Kevin Beal

@KevinBeal 我已经编辑了代码，并附上了一个 Github 仓库链接。希望能对你有所帮助。 - U Rogel

根据webpack文档 - "此选项已被before取代，并将在v3.0.0中删除。" https://webpack.js.org/configuration/dev-server/#src/components/Sidebar/Sidebar.jsx - Scott Sword

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';
      }
    }

- Sriram