【Nuxt.js】axiosとproxy-moduleを使って、リクエストをプロキシする方法

この記事では、nuxt-communityが提供している、”proxy-module”と”axios”を組み合わせて、サーバに送信するリクエストをプロキシする方法を紹介しています。

Nuxt.jsに”axios”をインストールする方法は、こちらの記事で紹介していますので、あわせてご覧ください。

【Nuxt.js】axiosのインストール方法と使い方を、プロジェクトの作成から解説

Nuxt.jsにaxiosを導入する方法とその使い方を、プロジェクトを作成するところから解説します。こんにちは、aiiro（@aiiro29）です。この記事は、次のような方に向けた内容となっています。「nuxt-communit...

はじめに
nuxt-community/proxy-moduleの導入

はじめに

Nuxt.jsではaxiosでリクエストをAPIサーバーに送信する場合、デフォルトだとaxiosのget()の引数を下記のように設定することになります。

APIのエンドポイント

http://localhost:8000/api/post

プロキシ未使用ver

<script>
  export default {
    async asyncData(context) {
      // @nuxt/proxyを使わない場合
      let data = await context.app.$axios.$get('http://localhost:8000/api/post');

      return {data};
    }
  }
</script>

すべてのリクエスト処理に対して、上記のようにURLを設定するのはできれば避けたいところなので、nuxt-communityが公開しているproxy-moduleを導入します。

GitHub - nuxt-community/proxy-module: The one-liner node.js http-proxy middleware solution for Nuxt.js using http-proxy-middleware

The one-liner node.js http-proxy middleware solution for Nuxt.js using http-proxy-middleware - GitHub - nuxt-community/proxy-module: The one-liner node.js http-...

proxy-moduleを導入した場合、次のようにプロキシをすることができるようになります。

プロキシ使用ver

<script>
  export default {
    async asyncData(context) {
      // /api/postをhttp://localhost:8000/api/postにプロキシする
      let data = await context.app.$axios.$get('/api/post');

      return {data};
    }
  }
</script>

nuxt-community/proxy-moduleの導入

それではproxy-moduleの導入方法を解説していきます。

nuxt-community/axios-moduleをインストール

proxy-moduleがaxios-moduleをサポートしているので、まずはnuxt-community/axios-moduleをインストールします。


npm install --save @nuxtjs/axios

nuxt-community/proxy-moduleをインストール


npm install --save @nuxtjs/proxy

proxy-moduleの設定

nuxt.config.jsに下記の設定を追加します。


module.exports = {
  ...
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
  ],
  axios: {
  },
  proxy: {
    '/api': 'http://localhost:8000',
  }
}

以上で設定は完了です。proxyは複数設定することも可能ですので、詳細は公開されているリポジトリを参照して下さい。