Nuxt Strapi Connection Refused

Question

I have a Nuxt application on localhost:3000 and I have a Strapi backend on localhost:1337. Both work fine individually (npm run dev on each folder is fine and loads). I'm trying to connect these two with @nuxtjs/strapi.

I receive a connection refused on console.

What am I doing wrong?

Nuxt v2.15.8 Strapi v.4.4.3

nuxt.config.js

export default {
  server: {
    port: 3000
  },
  
  buildDir: '_nuxt',
  build: {
    publicPath: '_nuxt/dist/'
  },
  serverMiddleware: ['~/server-middleware/logger'],

  // Global page headers (https://go.nuxtjs.dev/config-head)
  
  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [
    '~assets/css/globalwd.css',
    '~assets/scss/styles.scss',
    '@fortawesome/fontawesome-free/css/all.css'

  ],

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

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

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    '@nuxtjs/style-resources',
    '@nuxtjs/bulma', 
    '@nuxtjs/sitemap',
    '@nuxtjs/proxy',
    '@nuxtjs/axios',
    // '@nuxtjs/apollo',
    '@nuxtjs/strapi',
    
    
    
  ],
  styleResources: {
    scss: ['./assets/scss/*.scss']
  },
  // proxy: {
  //   '/api/strapi': {
  //     target: 'http://localhost:1337',
  //     pathRewrite: {
  //       '^/api/strapi': '/'
  //     }
  //   }
  // },    
  strapi: {
    // Options
    entities: ['forms'],
    url: '/api',
    // prefix: '/api',
    // version: 'v4',
    // cookie: {},
    // cookieName: 'strapi_jwt'
    url: 'http://localhost:1337'
  },
 
  build: {
    postcss: {
      preset: {
        features: {
          customProperties: false
        }
      }
    },
  }
}

Answer 1

I wasn't able to solve this with the versions of nuxt and strapi I was using, but I did install a nuxt3 with a strapi4 and that did the trick in a new project. I followed this link and that did the trick.

I created a new project, then had a backend folder then a frontend folder. I installed Strapi4 in the backend folder, and Nuxt3 in the frontend folder and the connection worked seamlessly following the link I posted.

Answer 2

The following solution helped me: https://forum.strapi.io/t/strapi-axios-request-on-ssr-fails-with-connect-econnrefused-but-csr-works-well/20799

I replaced STRAPI_URL=http://localhost:1337 with STRAPI_URL=http://127.0.0.1:1337