Nuxtのaxios-moduleがbaseURLを決定する仕組みの解説と、Netlify FormsへPOSTするときの対策

#なにに困ったか
axios-moduleのbaseURLは、何も設定がない場合はhttp://localhost:3000になる仕様です。¹

たとえ本番サーバで稼働していても。

この影響で、静的にgenerateしたSPAをNetlifyにアップし、そこからNetlify FormsへPOSTする場合には、ひと工夫する必要があります。^{2 3}

#どうすればいいか
シンプルなのですが、this.$axios.$postの第1引数にwindow.location.originを渡します。

this.$axios.$post(window.location.origin, params)

たとえばこのSPAがhttps://myexample.netlify.comにあるとしたら、windows.location.originもhttps://myexample.netlify.comになるので、そこに向けてPOSTされるようになります。

POSTするところ全体としてはこんな感じ。（responseの処理は省略）

  methods: {
    async submit() {
      const params = new FormData()
      params.append('form-name', 'contact')
      params.append('name', this.name)
      params.append('email', this.email)
      params.append('message', this.message)
      params.append('bot-field', this.botfield)
      const response = await this.$axios.$post(window.location.origin, params)
    },
  }

#axios-moduleの該当箇所のコードを読み解く
実際のコードを確かめてみましょう。
コード全体はここ(GitHub)にあります。

まずはホスト名とポート番号の取得箇所の抜粋。

axios-module/blob/dev/lib/module.js

  // Default port
  const defaultPort =
    process.env.API_PORT ||
    moduleOptions.port ||
    process.env.PORT ||
    process.env.npm_package_config_nuxt_port ||
    (this.options.server && this.options.server.port) ||
    3000

  // Default host
  let defaultHost =
    process.env.API_HOST ||
    moduleOptions.host ||
    process.env.HOST ||
    process.env.npm_package_config_nuxt_host ||
    (this.options.server && this.options.server.host) ||
    'localhost'

環境変数とかオプションでhost、portが設定されていなかったら、localhost:3000が選択されるようになっています。

ホストとポートは環境変数で指定できるので、これはNetlifyにアップした時にも設定できます。
なお、this.options.serverは、nuxt.config.jsのserverセクションを指しています。

もう1つ、プロトコルを決めている箇所の抜粋。

axios-module/blob/dev/lib/module.js

  // HTTPS
  const https = Boolean(this.options.server && this.options.server.https)

プロトコルを決める仕組みはこれだけです。nuxt.config.jsのserverセクションにhttpsの設定が入っていることが必須条件。

そのため、HTTPSを指定するのはnuxt generate した成果物を Netlify にアップするという条件では、クリアは困難と思われます。

よって、今回の条件下でHTTPSのAPIを呼びたい場合は、明示的にwindow.location.originを設定する方法をとることになります。

#さいごに
単純に回避するだけでなく、理由までわかってすっきりしました。
そして、文書を調べるだけでなく、大元のソースコードを確認するのも大事ですね。

1. 2020年2月11日現在。axios-module 5.9.5で確認。 ↩

2. 逆にいえば、サーバサイドでもNuxtが動作していれば（≒SSRできる状態なら）、そこの設定に基づいて適切に自動設定されます。 ↩

3. 実際、工夫なしでは、自分自身のサーバ（たとえばhttps://myexample.netlify.com）にPOSTしているつもりなのにhttp://localhost:3000を呼びだされ、CORSエラーになってしまいました。 ↩