2023.02.24  

【Vue】プロキシ設定でバックエンドサーバーと通信する方法

Vue    

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
      }
});

マニュアル: https://cli.vuejs.org/config/#devserver-proxy

コメント
現在コメントはありません。
コメントする
コメント入力

名前 (※ 必須)

メールアドレス (※ 必須 画面には表示されません)

送信