nuxtでaxiosのhostの設定について - とろろこんぶろぐ

概要

nuxtでクライアント側から$axiosでAPIアクセスする際に、一番ベストなホストの設定の仕方はどうすべきなのか調べた。

nuxt-axios-module

nuxt.config.js で以下のようにmoduleを設定すれば、nuxtのfetch(or asyncData)で$axiosを呼ぶことができる。この$axiosは、このときnuxt.config.jsでaxiosのoptionを設定できる。

  modules: [
    "@nuxtjs/axios",
    ...
  ],
  axios: {
    baseURL: process.env.BASE_URL || "http://api.example.com",
    browserBaseURL: process.env.BASE_URL || "http://api.example.com",
  },

Options | Axios Module

baseURLでserverからAPIアクセスするhostを設定できる。 browserBaseURLでブラウザからアクセスするAPIを設定できるはずだが、なぜか動かない...

nuxt-axios-module (proxy)

上記のoptionでproxyを設定する。例えば/api配下にAPIパスを持っているなら、以下のようにproxyできる。僕が利用しているのはこの方法。

  modules: [
    "@nuxtjs/axios",
    ...
  ],
  axios: {
    proxy: true,
  },
  proxy: {
    "/api/": process.env.API_URL || "http://localhost:3000/",
  },