Nuxt v2.15.8与Strapi v4.4.3连接被拒绝问题求助

环境与问题描述 #

• Nuxt版本：v2.15.8
• Strapi版本：v4.4.3
• 现象：Nuxt（localhost:3000）和Strapi（localhost:1337）单独启动均正常，但通过@nuxtjs/strapi连接时控制台出现连接被拒绝错误。

现有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
        }
      }
    },
  }
}

错误截图 #

问题原因与修复方案 #

你的strapi配置块里重复定义了url属性：先写了url: '/api'，又写了url: 'http://localhost:1337'，这会导致配置冲突，最终生效的可能是第一个/api，让Nuxt去请求自身的3000端口而非Strapi的1337端口，从而出现连接被拒绝。

另外，针对Strapi v4版本，@nuxtjs/strapi需要明确指定version: 'v4'，否则模块会默认使用v3的API路径规则，也会导致请求失败。

修改后的strapi配置如下：

strapi: {
  entities: ['forms'],
  url: 'http://localhost:1337',
  version: 'v4', // 必须指定v4版本
  // cookie: {},
  // cookieName: 'strapi_jwt'
}

修改后重启Nuxt服务，即可正常连接Strapi后端。

内容的提问来源于stack exchange，提问作者Amir Khadem