nuxtで、ルートURL直打ちの場合のみnuxt server errorECONNREFUSEDになるのは何故か

Question

お世話になっております。
nuxtをフロントエンド、railsAPIをバックエンドにアプリケーションを作成しております。そこで、http://localhost:3000へ接続しようとすると下記のエラーが発生しました。

前提・実現したいこと

URLを直接入力して、http://localhost:3000へ接続しようとすると下記のエラーが発生しました。

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

 ERROR  connect ECONNREFUSED 127.0.0.1:80                                                                                                                               17:43:38

  at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1141:16)

ブラウザでは
NuxtServerError　connect ECONNREFUSED 127.0.0.1:80
と表示されています。

該当のソースコード

#####index.vue

<template>
  <div class="container">
    <h2>Users</h2>
    <ul class="users">
      <li v-for="user in users" :key="user.id">
        <NuxtLink :to="'/users/' + user.id">
          {{ user.name }}
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData() {
    const { data } = await axios.get('/api/users')
    return { users: data }
  }
}
</script>

#####default.vue

<template>
  <div>
    <NuxtLink to="/">
      List of users
    </NuxtLink>
    <NuxtLink to="/signup">
      sign up
    </NuxtLink>
    <nuxt />
  </div>
</template>

#####nuxt.config.js

// const config =
export default {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: { color: '#fff' },
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
    'bootstrap-vue/nuxt'
  ],
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {
    proxy: true
  },
  proxy: {
    '/api': 'http://localhost:3001'
  },
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  }
}

CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                     NAMES
89f1ef228897        sweet_app_back      "docker-entrypoint.s…"   4 hours ago         Up 4 hours          0.0.0.0:3001->3001/tcp    sweet_app_back_run_527c8ee9fb9b
2e224b813f1a        mariadb:10.5.1      "docker-entrypoint.s…"   19 hours ago        Up 4 hours          0.0.0.0:32889->3306/tcp   sweet_app_db_1

試したこと

下記の方法ではエラーが発生せず、ルートページが表示されました。

1. http://localhost:3000/signupと打ち、signup.vueへ接続する
2. そのまま、default.vueに記載してあるrootへのリンクからhttp://localhost:3000へ接続

docker-compose upでも、ホスト側でyarn devしても同じエラーが発生しました。

補足情報（FW/ツールのバージョンなど）

80番ポートは全く使用しておりません。

ブラウザではNuxtServerErrorと書かれていること、80番ポートが関係していることから間違いなくnuxtserverが関係しているだろうと思っていますが、解決には至っておりません。

Answer 1

index.vueのasyncDataの書き方が問題だったようで、以下で解決しました。

• asyncDataの()内にcontextを追加
• axios.getをcontext.$axios.$getに変更

export default {
  async asyncData() {
    const { data } = await axios.get('/api/users')
    return { users: data }
  }
}

export default {
  async asyncData(context) {
    const data = await context.$axios.$get('/api/users')
    return { users: data }
  }
}