在 nuxtServerInit 中调度操作时 ECONNREFUSED

Question

我正在将 Nuxt 应用程序转换为 SSR - 因为我想使用

nuxtServerInit

和

asyncData

。这些是我转换它所采取的步骤。

1. 从

   ssr: false

    中删除 

   nuxt.config.js
2. 调度操作以初始化

   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 进行访问
• 注释掉

  // await dispatch("fetchData");

  中的

  nuxtServerInit

  - 重新启动开发服务器 - 站点可以再次访问，但没有初始数据。

所以，我怀疑

nuxtServerInit

中调度的操作导致了问题 - 如果是的话，我该如何解决这个问题，或者下一步应该在哪里调查？请告知，谢谢！

---

附加信息

• localhost:3030

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

Answer 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')
}

Answer 2

如果您有自己的服务器，请在主机文件中添加您的 api 域（在 linux /etc/hosts 中）

127.0.0.1 api.domain.com

我花了 2 天的时间来理解为什么它不起作用，然后我发现 pm2 服务器端只能在本地访问。

Answer 3

发生这种情况是因为 nuxt.config.js 上的 axios baseURL 端口与命令yarn run dev 的端口不同

axios 的右侧配置示例：- 1- nuxt.config.js

axios: {
    baseURL: 'http://localhost:5000',
  },

然后启动服务器命令必须具有与 axios 端口相同的 --port

yarn run dev --port 5000