尽管设置正确，但 Nuxt.Js axios 未使用 baseURL答案

【问题标题】：Nuxt.Js axios not using baseURL despite it being set correctly尽管设置正确，但 Nuxt.Js axios 未使用 baseURL
【发布时间】：2021-09-02 23:57:22
【问题描述】：

我想在asyncData()调用一个API

  async asyncData({ $axios, params, store }) {
    let itemUUID = params.item;
    let item = await $axios.get("/item/" + itemUUID);
    return {item};
  }

问题： Axios 仍在http://localhost:3000 上发出请求如果我执行console.log($axios.defaults.baseURL)，则会打印我的 API 的正确 baseURL。如果我使用我的商店操作并使用this.$axios 拨打电话，这也有效

我在 SSR 模式下使用 @nuxtjs/axios 5.13.1 和 Nuxt 2.15.6 并在 nuxt.config.js 中使用正确的 baseURL 配置它

有趣的是，如果我编辑页面内容并触发了热模块重新加载，则会使用正确的 URL。也许问题应该是 Axios 是否在正确的时间触发，在服务器上？

编辑：我检查了在 HMR 上发出的请求，这是在 client.js 中触发的。如果我在 created() 钩子中调用我的商店，请求就会成功执行。

我的nuxt.config.js：

  publicRuntimeConfig: {
    axios: {
      baseURL: process.env.EXPRESS_SERVER_URL
    }
  },

  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.EXPRESS_SERVER_URL,
    }
  },

【问题讨论】：

如果你在asyncData 中console.log($axios) 怎么办？你是如何在nuxt.config.js 中配置baseURL 的？ asyncData 和 fetch（钩子）应该产生相同的结果（服务器 + 客户端）。 baseURL 更新后您是否重新启动了您的应用程序？
仍然包括在 nuxt.config.js 中配置的正确 baseURL - 这包含一个持有 baseURL: process.env.EXPRESS_SERVER_URL 的 axios 对象
也许可以尝试使用runtimeConfig 进行axios 配置，如官方文档中所建议：stackoverflow.com/a/67983038/8816585
如果你把它完全称为服务器端呢？就像在您的 nuxt.config.js 文件的顶部一样，就像常规的 Node.js 脚本一样？它是否到达正确的端点？
啊，是的，对。在nuxtServerInit 试试吧：nuxtjs.org/docs/2.x/directory-structure/store/…

标签： javascript axios nuxt.js

【解决方案1】：

我不确定 NODE_TLS_REJECT_UNAUTHORIZED=0 是做什么的，但您的前端配置 (Nuxt) 到目前为止运行良好。

如果我不能在 Express 部分提供帮助，请见谅。

也许尝试在 Nuxt 上本地设置 HTTPS：How to run NUXT (npm run dev) with HTTPS in localhost?

【讨论】：

遗憾的是，这只是一半的答案，因为禁用 TLS 不是一种选择。对于您让我找出的那个错误，我的问题可能是错误的。感谢那！ :) 我可能必须先修复服务器上的根证书。

【解决方案2】：

TLDR; 这根本不相关 - 我忘记为我的后端设置身份验证令牌。在 axios init 时它不存在。 $axios 对象没有身份验证 - 后端失败。

在页面加载时，nuxt 函数nuxtServerInit() 用于从acces_token cookie 中获取身份验证令牌。

我正在使用插件来初始化 Axios - 使用商店中的令牌。但是当然，在 axios 初始化时令牌不存在，因为 nuxtServerInit 在插件初始化之后调用。

在我的 axios.js 插件中我更改了：

export default function({ app, error: nuxtError, store }) {
  const token = const token = store.state.user.token;

  app.$axios.setToken(token, "Bearer");
}

到;

export default function({ app, error: nuxtError, store }) {
  const token = app.$cookies.get("access_token");

  app.$axios.setToken(token, "Bearer");
}

现在令牌存在并用于服务器端发生的每个请求。

【讨论】：