Webpack 不接受 POST 请求答案

【问题标题】：Webpack not accepting POST requestsWebpack 不接受 POST 请求
【发布时间】：2017-01-30 21:19:04
【问题描述】：

我目前正在开发一个与 API 通信的 Angular 2 Web 应用程序。在应用程序中，用户可以选择支付选项，API 会将 URL 返回给支付服务。

问题是支付服务使用 POST 进入 WebPack 不接受的确认页面（由于某种原因它只允许 GET 请求）并且我们收到以下错误：

Cannot POST /selection/payment-method

有人知道我们如何配置 WebPack 也允许 POST 请求吗？我已联系支付服务提供商，但无法使用 GET 请求代替 POST。

谢谢

【问题讨论】：

你在生产中运行webpack-dev-server吗？
@robertklep 不，我们的生产服务器上没有生产，我们安装了 nginx，它为静态 html、js 和 css 提供服务。但是当我们在开发时，我们需要一种方法来开发确认页面。

标签： angularjs angular webpack webpack-dev-server

【解决方案1】：

根据@Sven 的回答，修改设置，使其适用于整个 POST

在您的 webpack.config.js 中添加对 body-parser、sync-request 的依赖项并添加对这两者的依赖项

var bodyParser = require('body-parser');
var request = require('sync-request');

在 webpack.config.js 的 devServer 部分

devServer: {
        setup: function(app) {
            app.use(bodyParser.json());
            app.use(bodyParser.urlencoded({
                extended: true
            }));

            app.post(/^\/(URL1|URL2|URL3)\//, function(req, res) {
                var serviceCallResponse = request('POST', 'your app server url here' + req.originalUrl, {
                    json:req.body
                });
                res.send(serviceCallResponse.getBody('utf8'));
            });
        },
        proxy: {
            '*/other URLs proxy/*': 'your app server url here'
        }
}

将 URL1/2 更改为您要代理的 URL，并放置您的应用服务器地址。

这适用于各种 POST 请求代理（处理 json 有效负载）

【讨论】：

【解决方案2】：

至少不会出现 404 错误的一种黑客方法是将请求代理到 /selection/payment-method 并发送回一个空响应（或您想要的任何内容，我认为 res 是 Express 的 Response 类的一个实例）对于那些，通过将以下内容添加到webpack.config.js：

devServer: {
  proxy: {
    '/selection/payment-method': {
      bypass : (req, res) => res.end()
    }
  }
}

文档here。

【讨论】：

感谢您的建议！在您发送的文档中检查了更多设置后，我们以不同的方式“破解”了它。使用代理，无论是 GET 还是 POST 请求，请求都会被终止。如果你使用 setup: 而不是 proxy: 你会得到 express 对象，当它是一个 post 或 put 或其他任何东西时你可以做一些事情。我在答案中添加了示例代码。

【解决方案3】：

感谢@robertklep，他向我发送了代理文档的链接，我们找到了处理它的方法。我们需要做的不是处理 POST 请求，而是需要以某种方式将其转换为 GET。在阅读了更多文档后，我们发现了 setup: 属性用于您的 webpack-dev-server 配置。

使用setup: 属性，您可以获得expressjs 对象，并且您可以在它到达Cannot POST /url/to/page 的路由之前捕获url。

我们最终得到了这个：

devServer: {
    setup: function(app) {
        app.post('/selection/payment-method', function(req, res) {
          res.redirect('/selection/payment-method');
        });
    },
}

这样我们得到一个 GET 请求而不是 POST 并且我们的应用程序执行一个 API 请求来检查支付是否成功。

这仅用于开发！

【讨论】：

你会如何在生产中做类似的事情？

【解决方案4】：

Webpack-dev-server 仅用作您的前端服务器，例如。为您的静态资产提供服务。因此只支持 GET 请求。

如果您想使用代理或后端服务器，那么您应该实现它。您可以为此使用Express。见how you can setup basic routing。

【讨论】：

我们的应用程序只提供静态资产，在确认页面它会做一个 API 请求来检查支付是否成功。在生产中，我们使用 nginx 来提供静态 html、js 和 css，一切正常。太糟糕了 webpack-dev-server 不允许它。无论如何感谢您的回答！
这不是一个很好的答案。代理的全部目的是在开发期间代理到数据服务器。代理 GET 而不是 POST 并没有多大好处。它实际上在大多数情况下都代理 POST，我只看到它在某些情况下失败。
代理数据是 webpack-dev-server 最基本的功能之一。很抱歉，我不得不对你的回答投反对票。