在 nuxtServerInit 中调度操作时 ECONNREFUSED答案

【问题标题】：ECONNREFUSED when dispatch action in nuxtServerInit在 nuxtServerInit 中调度操作时 ECONNREFUSED
【发布时间】：2020-12-19 08:00:16
【问题描述】：

我正在将我的 Nuxt 应用程序转换为 SSR - 因为我想使用 nuxtServerInit 和 asyncData。这些是我为转换它所采取的步骤。

从nuxt.config.js 中删除ssr: false
在nuxtServerInit 内部store/index.js 中初始化存储状态的调度操作

现在我的nuxt.config.js 看起来像这样

require("dotenv").config({ path: `.env.${process.env.NODE_ENV}` });

export default {
  router: {
    base: "/app/",
  },
  target: "static",
  head: {
    // Some head, meta, link config
  },
  css: ["@/assets/scss/main.scss"],
  styleResources: {
    scss: ["@/assets/scss/*.scss", "@/assets/scss/main.scss"],
  },
  plugins: ["@/plugins/apiFactory.js"],
  components: true,
  buildModules: [
    "@nuxtjs/eslint-module",
    ["@nuxtjs/dotenv", { filename: `.env.${process.env.NODE_ENV}` }],
  ],
  modules: [
    "bootstrap-vue/nuxt",
    "@nuxtjs/style-resources",
    ["nuxt-sass-resources-loader", "@/assets/scss/main.scss"],
  ],
  build: {
    splitChunks: {
      layouts: true,
    },
  },
};

store/index.js 看起来像这样。

import axios from "axios";

export const state = () => ({
  data: [],
});

export const mutations = {
  setData(state, data) {
    state.data = data;
  },
};

export const actions = {
  async nuxtServerInit({ dispatch }) {
    // Before converting to SSR this action was dispatched in page/component that need this data
    await dispatch("fetchData");
  },
  async fetchData({ commit }) {
    const { data } = await axios.get("http://localhost:3030/my/api/path");
    commit("setData", data);
  },
};

export const getters = { /* some getters */ };

但是在我重新启动开发服务器后 - 我收到了connect ECONNREFUSED 127.0.0.1:3030

这些是我之后采取的步骤

检查 localhost:3030 上的 API 是否正在运行且可访问 - 它正在运行且可通过直接 URL 和 Postman 访问
注释掉nuxtServerInit 中的// await dispatch("fetchData"); - 重新启动开发服务器 - 站点可以再次访问，但没有初始数据。

所以，我怀疑在nuxtServerInit 中调度的操作会导致问题 - 如果是我该如何解决这个问题，或者我接下来应该在哪里查看？请告知，谢谢！

附加信息

localhost:3030 上的 API 是 Lumen 版本 7.2.2
应用程序将部署在共享主机上

【问题讨论】：

您在此期间找到解决方案了吗？我遇到了同样的问题。在 nuxt 组件的任何地方，axios API 调用都会经过，只有在 nuxtServerInit 内的 index.js 存储中，我得到一个错误：connect ECONNREFUSED 127.0.0.1 ... Cheers Tim

标签： javascript vue.js nuxt.js

【解决方案1】：

主要原因是 nuxt 无法从它所在的位置连接到您的主机。就我而言，它是 docker 容器，其中 127.0.0.1 是……容器！因此，您必须将 baseUrl 更改为该容器中实际可访问的服务器。

const axiosPlugin: Plugin = ({ $axios, isDev }) => {
    if (isDev && process.server) $axios.setBaseURL('http://172.22.0.1:3000/api')
}

【讨论】：