[vue.config.js]devServerのproxyが動作しない

各所で書かれている方法で、proxyを記述していました。

module.exports = {
    devServer: {
        port: 8888,
        proxy: {
            '/api/': {
                target: 'http://localhost:8081'
            }
        }
    }
};

久しぶりに起動すると、何故かproxyが動作しない。
port: 8888 は読み込まれていたので、ファイルの置き場所などが原因ではないみたい。

原因調査

まずは情報が欲しいので、 logLevel: 'debug' を仕込みます。

        proxy: {
            '/api/': {
                target: 'http://localhost:8081',
                logLevel: 'debug'
            }
        }

起動

$ npm run serve

起動時のメッセージを確認。 Proxyがなんだか怪しいですね。

 INFO  Starting development server...
[HPM] Proxy created: [Function: context]  ->  http://localhost:8081

ググって辿り着いた様々な記事を見ると、 [Function: context] の部分には本来パスルールが入るはずです。

こんな感じ

[HPM] Proxy created: /api  ->  http://localhost:3000

引用 : https://www.yoheim.net/blog.php?q=20170803

次に、 pathRewrite を設定するのが良いという方法を見つけた

引用 : https://forum.vuejs.org/t/devserver-proxy-in-vue-config-js-not-working/87316

早速やってみる。頭に ^ を付与し、pathRewriteにて外したものを定義する

        proxy: {
            '^/api/': {
                target: 'http://localhost:8081',
                logLevel: 'debug',
                pathRewrite: { "^/api/": "/api/" }
            }
        }

この状態で起動。proxyが動いていそうです。

[HPM] Proxy rewrite rule created: "^/api/" ~> "/api/"

アクセスしてみる。proxyが動作しました。

[HPM] GET /api/get_user_list?user_id=1 -> http://localhost:8081