Webpack不接受POST请求

Question

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

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

Cannot POST /selection/payment-method

有谁知道我们如何配置WebPack允许POST请求吗?我已经联系了支付提供商，但不可能用GET请求代替POST。

谢谢

Answer 1

感谢@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请求来检查支付是否成功。

这只在开发中使用!

Answer 2

根据@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负载上工作)

Answer 3

一种至少不会得到404错误的hack方法是将代理请求发送到/selection/payment-method并发回空响应(或任何您想要的内容，我认为res是Express的响应类的实例)，通过将以下内容添加到webpack.config.js:

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

文档。

Answer 4

Webpack-dev-server只打算作为你的前端服务器。为您的静态资产服务。因此，只支持GET请求。

如果您想要使用代理或后端服务器，那么您应该实现它。您可以使用Express。