[Vue]devServerでフロント開発中、別ポートで起動しているバックサーバーにリクエストを送る方法

やりたいこと

• vue-cli3でプロジェクトを作成
• yarn serve でフロント開発サーバーを8080で起動
• axiosか何かを使って、9081でローカル起動しているバックエンドアプリにリクエストを飛ばす
• つまり、フロントとバックの開発が同時にできる

やり方

• プロジェクト直下に vue.config.js を作成
• 以下を記述

module.exports = {
    devServer: {
        proxy: {
            "/api": {
                target: "http://localhost:9081",
            },
        },
    },
}

これで、フロントから
localhost:8080/api/some
を飛ばすと
localhost:9081/api/some
に変換される。

変換というよりはdevServerを経由して9081に送られているので、ブラウザの開発者ツールで確認しても8080にリクエストを投げたことになっている。