【Nuxt.js】nuxt.config.jsにproxyの設定をする（環境変数の設定）

関連記事

【Nuxt.js】環境変数の設定とswagger mockの設定メモ

経緯

• 【Nuxt.js】環境変数の設定とswagger mockの設定メモの方法では、NuxtでAPIを呼び出して登録データをPOSTできなかった
• proxyの設定が必要なことが判明

proxyの設定

• envファイルで定義したapiBaseUrlを以下のようにproxyで設定すれば、環境ごとのパスでAPIを呼び出すことができる

nuxt.config.js

const environment = process.env.NODE_ENV
const envSet = require(`./env.${environment}.js`)

export default {
  env: envSet,

  (省略)

  axios: {
    proxy: true
  },
  proxy: {
    "/api": envSet.apiBaseUrl
  },

  (省略)

}

• 例えば、開発環境でのパスを以下のように設定しているのであれば、

env.development.js

module.exports = {
  apiBaseUrl: "http://localhost:3000"
}

• /api/formと記述することで、開発環境ではhttp://localhost:3000/api/formというAPIのパスを呼び出すことができる

index.vue

<script>
const url = "/api/form"

export default {
  methods: {
    submit() {
      axios
        .post(url, data)
        .then(res => {
          // 省略
        })
        .catch(e => {
          // 省略
        })
    }
  }
}
</script>

参照

Options - Axios Module - Nuxt.js