なにに困ったか
axios-moduleのbaseURLは、何も設定がない場合はhttp://localhost:3000になる仕様です。1
たとえ本番サーバで稼働していても。
この影響で、静的に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)にあります。
まずはホスト名とポート番号の取得箇所の抜粋。
// 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つ、プロトコルを決めている箇所の抜粋。
// 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を設定する方法をとることになります。
さいごに
単純に回避するだけでなく、理由までわかってすっきりしました。
そして、文書を調べるだけでなく、大元のソースコードを確認するのも大事ですね。