Vueでプロキシ設定をする方法のメモ書きです。
今回の設定はVueとバックエンドのサーバーが分かれていて、クライアント --> Vueサーバー --> バックエンドサーバーの経路で通信を行いたい時を想定した設定となります。
ホスト単位でアクセス制御したい場合
プロキシ設定をするにはvue.config.jsで行います。
Vueの接続URLをhttps://www.example1とします。
下記コード例ではhttps://www.example1/<指定したパス>に接続してアクセスできなかった時は、バックエンドサーバーであるhttps://www.example2/<指定したパス>に接続する設定となります。
イメージとしては接続に失敗したらURLがそのままバックエンドサーバーのものに置き換わり、パスはそのままで通信されるかたちです。
// vue.config.js
module.exports = defineConfig({
devServer: {
proxy: 'https://www.example2',
}
});
下記はvueからの呼び出し例です。
※ プロジェクトによって書き方は色々あると思うので、あくまで一例です。
// axios.ts
axios.get('/login?userId=xxxx')
マニュアル: https://cli.vuejs.org/config/#devserver-proxy
パスごとにアクセス制御したい場合
次の例はパスごとにアクセス制御したい時の記述例です。
下記はhttps://www.example1/dev/user/loginに接続してアクセスできなかった時は、バックエンドサーバーであるhttps://www.example2/dev/user/loginに接続する設定となります。
先ほどの例との違いは、パスに/dev/user/loginが含まれない場合、バックエンドサーバーと通信を行わないところです。
// vue.config.js
module.exports = defineConfig({
devServer: {
proxy: {
'^/dev/user/login': {
target: 'https://www.example2',
ws: true,
changeOrigin: true
}
});
