【Nuxt】SSRモード時に、サーバサイドでAxiosを実行してもconnect ECONNREFUSED 127.0.0.1:8000のエラーが出力され、結果が取得出来ない

Question

現状

現在、Nuxt.jsを使用してSSRでの開発を行っております。
store/index.jsのactionに、nuxtServerInitメソッドを用意し、axiosを実行したところ下記のエラーが出力されデータを取得することが出来ません。
下記エラーの対処方法をご教授頂けると幸いです。

※APIには、Django REST Frameworkを使用しております。
※クライアントサイドでAxiosを実行した際には問題なくデータは取得出来ております。

エラー内容

connect ECONNREFUSED 127.0.0.1:8000                                                                                                                                                                                                05:22:57

  at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1128:16)

ソースコード

store/index.js

export const actions = {
	nuxtServerInit () {
		this.$axios({
			url: 'http://localhost:8000/api/article/recent_articles/',
			method: 'GET',
		})
		.then(res => {
			console.log(res)
		})
		.catch(e => {
			console.log(e)
		})
	},
}

---

docker-compose.yml

version: '3'
services:
    server:
        image: drf-base
        container_name: server
        working_dir: /home/app/server/
        command: gunicorn server.wsgi:application --bind 0.0.0.0:8000
        ports:
            - '8000:8000'
        volumes:
            - .:/home/app
        tty: true

    client:
        image: vue-base
        container_name: client
        working_dir: /home/app/client
        ports:
            - '3000:3000'
        volumes:
            - .:/home/app
        tty: true

---

Client Dockerfile

FROM node:latest

RUN apt-get update
RUN apt-get install -y --no-install-recommends \
    net-tools \
    sudo \
    bzip2 \
    curl \
    gcc \
    vim
RUN apt-get clean

RUN npm install -g @vue/cli

---

Server Dockerfile

FROM python:3

ENV PYTHONUNBUFFERED 1

RUN apt update
RUN apt install -y --no-install-recommends \
	net-tools \
	sudo \
	bzip2 \
	curl \
	gcc \
	python3-dev \
	vim
RUN apt clean

RUN pip install --upgrade pip
RUN pip install \
	django \
	djangorestframework \
	djangorestframework-jwt \
	django-filter \
	django-environ \
	django-cors-headers \
	gunicorn \
	Pillow

---

nuxt.config.js

import colors from 'vuetify/es5/util/colors'

export default {
  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    titleTemplate: '%s - nuxt-app',
    title: 'nuxt-app',
    htmlAttrs: {
        lang: 'ja'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [
      '@/assets/scss/main.scss',
  ],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
      '@/plugins/filter.js',
      { src: '@/plugins/cookieStorage.js' },
      '@/plugins/http.js',
      '@/plugins/mixin.js'
  ],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify'
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/style-resources',
    '@nuxtjs/auth',
    '@nuxtjs/proxy',
  ],
  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {
     baseURL: process.browser ? '' : 'http://localhost:8000',
    // proxy: true,
  },
  proxy: {
	  '/api': {
		  target: 'http://server:8000/api',
		  pathRewrite: {
			  '^/api/': '/'
		  }
	  }
  },
  server: {
      host: '0.0.0.0',
      port: 3000
  },
  router: {
      middleware: ['global']
  },
  watchers: {
	  webpack: {
		  poll: true
	  }
  }
}

試したこと

fetch内で実行

index.vueコンポーネント内のfetchで同じようにAxiosを実行してみましたが、結果は同じでした。

<script>
    export default {
        async fetch () {
            const { data } = await this.$axios.$get('http://localhost:8000/api/article/recent_articles/')
            console.log(data)
        }
    }
</script>

axiosに渡すURLを変更

// urlを下記のように修正
http://localhost:8000/api/article/recent_articles/  // 変更前
↓
/api/article/recent_articles/   // 変更後

nuxt.config.jsのproxyの設定を変更

nuxt.config.js内のproxyのtargetプロパティの設定をdockerの名前空間を指定していましたが、localhostに変更してみました。

proxy: {
    '/api': {
        target: 'http://localhost:8000/api',
        pathRewrite: {
            '^/api/': '/'
        }
    }
},

実行環境

Docker : 19.03.13
docker-compose : 1.27.4
nuxt : 2.14.7
node.js : 15.1.0
npm : 7.0.8
OS : Debian GNU/Linux 9

---

以上、よろしくお願いいたします。