Question

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

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

Cannot POST /selection/payment-method

有人知道我们如何配置WebPack也允许POST请求吗？我已与支付提供商联系，但无法执行GET请求而非POST。

由于

Answer 1

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

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

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更改为您要代理的网址，然后放置您的应用服务器地址。

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

Answer 2

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

如果您想使用代理服务器或后端服务器，那么您应该实现这一点。您可以使用Express。请参阅how you can setup basic routing。

Answer 3

至少没有得到404错误的一种hackish方法是将请求代理到/selection/payment-method并发回空响应（或者你想要的任何内容，我认为res是Express的实例＆＃ 39; s Response class），通过将以下内容添加到webpack.config.js：

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

文档here。

Answer 4

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

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

我们最终得到了这个：

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

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

这仅用于开发！

Webpack不接受POST请求

4 个答案: