webpack-dev-serverでvirtual server対応なreverse proxy設定

webpack

Javascript+REST APIという最近良くある組合せのwebアプリを開発する場合、fileプロトコルではAjax通信できない&クロスドメインアクセス制限回避のため、ローカルに開発用reverse proxyを立てる必要に迫られることがよくあると思います。
その際、Javascriptのbuildでwebpackを使っているのであれば、開発サーバとしてのwebpack-dev-serverでそのままreverse proxyも実現できると便利です。

そうしたニーズを踏まえ、webpack-dev-serverにはproxy機能が存在しますが、backend(proxy先)が"virtual server"だったときにハマったので覚書。
というか、当初問題無かったのがbackend側の変更で急に動かなくなったのでバタバタした、というのが真相ですが…

結論から言うと「(名前ベースの)virtual serverはHOSTヘッダに適切な値が設定されていることを要求する」という、よく考えればそ〜だよねという話でした。
では、webpack-dev-serverでどうやってHOSTヘッダを設定するか？ですが、これはrewrite functionの中で設定できます。

例えば、

なのであれば、こんな感じになります。

module.exports = {
    devServer: {
        contentBase: __dirname,
        port: 8008,
        proxy: {
            '/API/*': {
                target: 'http://api.example.jp',
                rewrite: function(req) {
                    req.headers.host = 'api.example.jp'; ←ここ
                    req.url = req.url.replace(/^\/API\//, '/');
                },
…