Webpack not accepting POST requests

问题

I'm currently working on an Angular 2 web application which communicates with an API. In the application the user is able to choose a payment option and the API will return the url to the payment service.

The problem is that the payment service uses POST to go to the confirmation page which WebPack does not accept (for some reason it only allows GET requests) and we get the following error:

Cannot POST /selection/payment-method

Does anybody know how we could configure that WebPack allows POST requests also? I've contacted the payment provider but it is not possible to do a GET request instead of POST.

Thanks

回答1:

Based on @Sven's answer, modification to the setup so that it works for POST all throughout

Add dependencies on body-parser, sync-request and add require dependencies on both in your webpack.config.js

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

In devServer part of webpack.config.js

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

Change URL1/2 to the URLs you want to proxy and you place your app servers address.

This will work for all sorts of POST request proxy (working on json payload)

回答2:

The Webpack-dev-server is only intended as your front-end server only, eg. to serve your static assets. Therefore only GET requests are supported.

If you would want to use a proxy or backend server, then you should implement this. You can use Express for this. See how you can setup basic routing.

回答3:

A hackish way to at least not get 404 errors is to proxy requests to /selection/payment-method and send back an empty response (or whatever content you want, I think that res is an instance of Express's Response class) for those, by adding the following to webpack.config.js:

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

Documentation here.

回答4:

Thanks to @robertklep who send me the link to the proxy documentation we found a way to deal with it. What we needed to do was instead of handling the POST request we needed to transform it someway into a GET. After reading some more of the documentation we came across the setup: property for your webpack-dev-server configuration.

With the setup: property you get the expressjs object and you are able to catch urls before it hits the route that says Cannot POST /url/to/page.

We ended up with this:

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

This way we got a GET request instead of POST and our application does an API request to check if the payment succeeded or not.

This is only used in development!

来源：https://stackoverflow.com/questions/39636615/webpack-not-accepting-post-requests

标签

angularjs

angular

Webpack

webpack-dev-server