サーバーモードで動作するようにBrowserSyncを設定し、http-proxy-middlewareを使用して別のポートの同じマシン上で実行されるバックエンドに自分のAPI要求をプロキシしようとしています。私はGulpを使ってBrowserSyncを起動します。http-proxy-middlewareが完全なパスを転送しない
BrowserSyncが私のバックエンドは、私はプロキシミドルウェアを作成する方法ですここで8080
上で動作するポート8081上で動作します:
var proxyApi = proxy('/api', {target : 'http://localhost:8080/api', logLevel : 'debug'});
そして、ここでは、私は私のガルプタスクからBrowserSyncを実行する方法を示します。
// Init BrowserSync with proxies as middleware and based on the dest dir
browserSync.init({
open: true,
port: config.proxyPort,
server: {
baseDir: config.destDir,
middleware: [proxyApi]
},
browser: "google chrome"
});
出力:
[HPM] Proxy created: /api -> http://localhost:8080/api
すべてがうまく見えます。
しかし、私がヒットしたときなどhttp://localhost:8081/api/users
、出力は次のようになります。
[HPM] GET /api/users/123 -> http://localhost:8080/api
...そして自分自身で/api
がバックエンドで何も一致していないので、私のクライアントは、404エラーを取得します。
私はドキュメントと例から理解するものから、ターゲットが実際にhttp://localhost:8080/api/users/123
はなぜ(この場合は/users/123
)パスの残りの部分取り残されているべきか?
"gulp": "3.9.1",
"browser-sync": "2.16.0",
"http-proxy-middleware": "0.17.1",
ポインタとソリューションをありがとう。私は、サーバー全体ではなく、特定のルートをプロキシしたいので、2番目の方法はうまくいきます。私は、 'prependPath'パラメータの名前は、それが何のために非常に直感的ではないと言わなければなりません。 –
構成の違いを除いて、オプション1と2の間に実際の違いはありません。最初の引数 ''/api ''は、それらのリクエストだけがプロキシされていることを確認しています。 '+ http:// localhost:8080/api'というターゲットパスと、直感的でない場合は余分な' prependPath'オプションを保持する理由について考えることはできません。 :) – chimurai