title: Nuxt ssr asyncData axios request not works on page reload
body: <p>After 5-6 hours of searching for the solution, I start to give up. I have a project with docker, node &amp; nuxt.I would like to share meta tags on FB and for this, I need SSR &amp;&amp; vue-meta and for vue-meta I need asyncData.</p>
  <p>it works with different api!</p>
  <pre><code>async asyncData({ params, $axios, error }) {
    const product = await $axios.$get(`https://api.nuxtjs.dev/posts/1`);
    return { product };
  },
  </code></pre>
  <p>It is working when i navigate to here with nuxt routing, but if i reload the page (just here) then i get a RuntimeError from the nuxt ssr.</p>
  <p>SO THE REAL PROBLEM IS I GET A RuntimeError ON PAGE RELOAD ON LOCALHOST</p>
  <pre><code>async asyncData({ params, $axios, error }) {
    //axios knows the api
    //http://localhost:8080/ 
    const product = await $axios.$get(`products/${params.id}`);
    return { product };
  },
  </code></pre>
  <p>If I try this with Axios then I get this error:</p>
  <pre><code>Cannot read property 'data' of undefined
  </code></pre>
  <p>If I try this with @nuxt/http then I get this error</p>
  <pre><code>request to http://localhost:8080/products/some-id failed, reason: connect ECONNREFUSED 127.0.0.1:8080
  </code></pre>
  <p>I think the problem is when I push hard reload on this page, then I cannot make requests on localhost but I don't know why and how to solve it.</p>
  <p>my nuxt-config.js</p>
  <pre><code>export default {
    // Disable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
    // ssr: false,
  
    // Global page headers (https://go.nuxtjs.dev/config-head)
    head: {
      title: '',
      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' },
        { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&amp;display=swap' },
      ]
    },
  
    // Global CSS (https://go.nuxtjs.dev/config-css)
    css: [
      '@/assets/scss/styles.scss',
      // '~node_modules/bootstrap/dist/css/bootstrap.css',
      // '~node_modules/bootstrap-vue/dist/bootstrap-vue.css',
    ],
  
    // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
    plugins: [
      '~/plugins/notifier',
      '~/plugins/axios',
      '~/plugins/dateFilter',
      '~/plugins/loading',
    ],
  
    // Auto import components (https://go.nuxtjs.dev/config-components)
    components: true,
  
    // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
    buildModules: [
      'nuxt-lazysizes', //https://github.com/ivodolenc/nuxt-lazysizes
      '@aceforth/nuxt-optimized-images', //https://github.com/juliomrqz/nuxt-optimized-images //only build
    ],
  
    // Modules (https://go.nuxtjs.dev/config-modules)
    modules: [
      '@nuxtjs/axios',
      '@nuxtjs/auth',
      '@nuxtjs/style-resources',
      'nuxt-i18n',
      'bootstrap-vue/nuxt',
      '@nuxt/http',
    ],
  
    styleResources: {
      scss: [
        // './assets/scss/*.scss',
        '@/assets/scss/_variables.scss',
        '@/node_modules/bootstrap/scss/_functions.scss',
        '@/node_modules/bootstrap/scss/_variables.scss',
        '@/node_modules/bootstrap/scss/mixins/_breakpoints.scss',
      ]
    },
  
    bootstrapVue: {
      bootstrapCSS: false,
      bootstrapVueCSS: false,
      icons: false,
    },
  
    axios: {
      // baseURL: ``, //built by docker compose from API_PORT &amp;&amp; API_HOST variables
    },
  
    auth: {
      strategies: {
        local: {
          endpoints: {
            login: { url: '/auth/login', method: 'post', propertyName: 'token' },
            logout: false,
            user: { url: '/auth/user', method: 'get', propertyName: 'user' },
          },
        }
      },
      redirect: {
        login: '/login',
        logout: '/',
        callback: '/login',
        home: '/admin/products',
      },
    },
  
    // Build Configuration (https://go.nuxtjs.dev/config-build)
    build: {
      // babel: {
      //   compact: true,
      // },
    },
  
    router: {
      extendRoutes(routes, resolve) {
        routes.push(
          {
            name: 'product-edit',
            path: '/admin/products/edit/:id',
            component: 'pages/admin/products/add.vue',
          },
          {
            name: 'product-image-upload',
            path: '/admin/products/product-image-upload/:id',
            component: 'pages/admin/products/product-image-upload.vue',
          },
          {
            name: 'gallery-image-upload',
            path: '/admin/gallery-image-upload',
            component: 'pages/admin/gallery-image-upload.vue',
          },
        );
      }
    },
  
    env: {
      baseUrl: `${process.env.BASE_URL}`,
      imagePath: `${process.env.BASE_URL}:${process.env.API_PORT}/uploads`,
    },
  
    publicRuntimeConfig: {
      baseUrl: `${process.env.BASE_URL}`,
      imagePath: `${process.env.BASE_URL}:${process.env.API_PORT}/uploads`,
    },
  
    loading: '~/components/LoadingBar.vue',
  
    i18n: {
      locales: [
        { code: 'en', iso: 'en-US', file: 'en.js' },
        { code: 'hu', iso: 'hu-HU', file: 'hu.js' },
        { code: 'de', iso: 'de-DE', file: 'de.js' },
      ],
      defaultLocale: 'en',
      lazy: true,
      langDir: '/i18n/',
      parsePages: false,
      vueI18n: {
        fallbackLocale: 'en',
      },
      detectBrowserLanguage: {
        useCookie: true,
        cookieKey: 'i18n_redirected',
      },
      seo: false,
      vueI18nLoader: true,
      strategy: 'no_prefix',
    },
  
    lazySizes: {
      extendAssetUrls: {
        img: 'data-src',
        source: 'data-srcset',
        // Component with custom props
        AppImage: ['source-md-url', 'image-url'],
      },
    },
  
    optimizedImages: {
      inlineImageLimit: 1000,
      handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],
      optimizeImages: false,
      optimizeImagesInDev: false,
      defaultImageLoader: 'img-loader',
      mozjpeg: {
        quality: 80,
      },
      optipng: {
        optimizationLevel: 3,
      },
      pngquant: false,
      gifsicle: {
        interlaced: true,
        optimizationLevel: 3,
      },
      svgo: {
        // enable/disable svgo plugins here
      },
      webp: {
        preset: 'default',
        quality: 75,
      },
    },
  };
  
  </code></pre>
  <p>my docker-compose.yml</p>
  <pre><code>version: '3'
  services:
    server:
      build:
        context: ./server
      env_file: .env
      expose:
        - $SERVER_PORT
      ports:
        - $SERVER_PORT:$SERVER_PORT
      volumes:
        - ./server:/usr/app
        - /usr/app/node_modules
    client:
      build:
        context: ./client
      env_file: .env
      environment:
        NUXT_HOST: 0.0.0.0
        NUXT_PORT: $CLIENT_PORT
        API_HOST: 0.0.0.0
        API_PORT: $SERVER_PORT
        BASE_URL: $BASE_URL
      volumes:
        - ./client:/usr/app
        - /usr/app/node_modules
      expose:
        - $CLIENT_PORT
      ports:
        - $CLIENT_PORT:$CLIENT_PORT
  </code></pre>
  <p>Update: if I start my nuxt project without Docker then everything works fine but this is not a solution for me :D</p>