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

【问题标题】：How do I get webpack-dev-server to accept POST requests如何让 webpack-dev-server 接受 POST 请求
【发布时间】：2018-08-28 22:41:50
【问题描述】：

在我的项目中我调用：

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

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

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

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

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

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

【问题讨论】：

标签： post webpack webpack-dev-server

【解决方案1】：

您正在寻找的是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")
            })
        }
    }
}

编辑： 如果你想更好看的话，我已经将简约的example 推送到 github。

【讨论】：

webpack.devServer.setup.js 中有什么内容？我不是 express 或 webpack-dev-server 使用它的专家。
在那里你可以建立一个完整的快递服务器，你可以用它来拥有app.post和其他api功能。在我的项目中，我将其制作为几乎是 prod server.js 的副本，但无法访问 express var。
你能给我一些示例代码吗？我的后端不是一个快速应用程序，我不知道我应该如何响应请求。
@KevinBeal 我已经编辑了代码并附上了一个 github repo。希望对您有所帮助。
根据 webpack 文档 - “此选项之前已弃用，将在 v3.0.0 中删除。” webpack.js.org/configuration/dev-server/#src/components/Sidebar/…

【解决方案2】：

@cowCrazy 说了一半，但没有说明如何在 POST 的情况下以相同的响应响应 GET，这正是我所寻找的。p>

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

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

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

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

【讨论】：

根据文档，setup 已弃用，取而代之的是 before：webpack.js.org/configuration/dev-server/#devserversetup

【解决方案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';
      }
    }

【讨论】：