WebpackがPOSTリクエストを受け付けない

Question

現在、APIと通信するAngular 2 Webアプリケーションを開発中です。アプリケーションでは、ユーザーは支払いオプションを選択することができ、APIはURLを支払いサービスに返します。

問題は支払いサービスはWebPACKのは（それが唯一の要求をGETできます何らかの理由で）受け入れないと、我々は次のエラーを取得する確認ページに移動するにはPOSTを使用していることです：

Cannot POST /selection/payment-method

誰もWebPackがPOSTリクエストを許可するように設定する方法を知っていますか？私は支払いプロバイダに連絡しましたが、POSTの代わりにGETリクエストを行うことはできません。

おかげ

Answer 1

@robertklepのおかげでプロキシのドキュメントへのリンクが送られてきました。これを処理する方法が見つかりました。私たちは、POSTリクエストを処理して、GETに変換する必要があったのです。いくつかのドキュメントを読み終えたら、webpack-dev-server設定のsetup:プロパティを見つけました。

setup:プロパティでは、expressjsオブジェクトを取得し、Cannot POST /url/to/pageというルートに達する前にURLを取得できます。

我々はこれで終わった：私たちが代わりにPOSTのGETリクエストを持って、私たちのアプリケーションは、支払いが成功したかどうかをチェックするためのAPIリクエストを行う

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

この方法です。

これは開発にのみ使用されます。 @スヴェンの答えに基づいて

Answer 2

のWebPACK-devのサーバーにのみ例えば、あなただけのフロントエンドサーバーとして意図されています。あなたの静的資産を提供する。したがって、GET要求のみがサポートされます。

プロキシサーバーまたはバックエンドサーバーを使用する場合は、これを実装する必要があります。これにはExpressを使用できます。 how you can setup basic routingを参照してください。

Answer 3

少なくとも404エラーが出ないようにハック方法は/selection/payment-methodにプロキシ要求にあり、追加することによって、それらのために（またはあなたが好きなコンテンツを、私はresエクスプレスのResponseクラスのインスタンスであることを考える）空の応答を送り返しwebpack.config.jsに次

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

ドキュメントhere。

Answer 4

、セットアップへの変更、それは

全体のすべてがsync-request、body-parserに依存関係を追加し、追加POSTのために動作するようには

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

あなたwebpack.config.jsの両方に依存関係が必要ですdevServerで

プロキシするURLに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' 
     } 
} 

変更URL1/2の一部あなたはあなたのアプリケーションサーバーアドレスを配置します。

これは、本番で `WebPACKの-DEV-server`を実行しています（JSONペイロードに取り組んで）POSTリクエストのプロキシのすべての種類