NuxtでProxyが上手く動作しません。

Question

前提・実現したいこと

Nuxtで、usersのnewページから名前を投稿し、リダイレクトされ_id.vueページで送信した名前を表示しようとしています。RailsをAPIに使用しProxyで呼び出す設定をしています。

発生している問題・エラーメッセージ

投稿フォームから送信するとリダイレクトはされて、ページは表示されますが名前が表示されません。
consoleにはエラーはなく、URLにはhttp://localhost:8000/users/undefinedと、
Networkにはhttp://localhost:8000/users/undefinedと出て、APIのlocalhost:3000が読み込まれていないところまで確認できました。ちなみにデータの送信自体はconsoleログで確認できました。

該当のソースコード

// nuxt.config.js
 modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    proxy: true
  },
  proxy: {
    '/api/': {
      target: 'http://localhost:3000',
      pathRewrite: {
        '^/api/': ''
      }
    }

// front/plugins/axios.js
export default function({ $axios, redirect }) {
  $axios.setToken('access_token')

  $axios.onResponse(config => {
      $axios.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
  })
}

// front/pages/users/_id.vue
<template>
  <h1>Hello, {{ name }}</h1>
</template>

<script>
export default {
  asyncData({ $axios, params }) {
    return $axios.get(`/api/users/${params.id}`)
      .then((res) => {
        return { name: res.data.name }
      })
  }
}
</script>

// front/pages/users/new.vue
<template>
  <section>
    <div>
      <h1>New user</h1>
      <form @submit.prevent="post">
        <label for="name">Name: </label>
        <input id="name" v-model="name" type="text" name="name" />
        <button type="submit">submit</button>
      </form>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  methods: {
    post() {
      this.$axios.post('/api/users', { name: this.name })
        .then((res) => {
          this.$router.push(`${res.data.id}`)
      })
    }
  }
}
</script>

試したこと

_id.vueページの
return $axios.get(/api/users/${params.id})を return $axios.get(/localhost:3000/users/${params.id})に直すと名前は表示されたので、nuxt.config.jsに原因があると仮説を立てています。

一番状況が似ているhttps://teratail.com/questions/334172を参考に、
pathRewriteで'^/api/': '/' から'^/api/': ''に変更しましたが状況は変わりませんでした。
どなたかご教授いただけますでしょうか。

Answer 1

_id.vueページの
return $axios.get(/api/users/${params.id})をreturn $axios.get(users/${params.id})に変更すると、リダイレクトされ投稿した名前を表示することができました。
nuxt.config.jsの

axios: {
    proxy: true
  },
  proxy: {
    '/api/': {
      target: 'http://localhost:3000',
      pathRewrite: {
        '^/api/': ''
      }
    }

をコメントアウトしても処理ができていたことから、proxyが動作せずに実行できてしまったようです。。
しかし、なぜそうなるのか理論の裏付けができていないので根本的な解決に至らず、今後の課題にしていきたいます。