Question

我的Nuxt.js项目中有axios模块。
当客户端在端口3000上运行时，我还在localhost:4040/api中设置了我的baseUrl（用于API）。
当我在API中提取图像数据时，它会返回api服务器的相对路径，如“ /upload/1.png”
{ "src":"/upload/1.png" }

因此，我需要获取axios baseUrl并将其与它合并以创建图像的完整路径。
除了对其进行硬编码之外，还有其他方法吗？

Answer 1

您可以像这样访问axios配置以获取您的api基本URL：

this.$axios.defaults.baseURL

Answer 2

如果在 nuxt.config.js 中定义：

axios: {
  baseURL:"localhost:4040/api/"
}

您需要对图像进行以下操作：

:src="`${$axios.defaults.baseURL}upload/1.png`"

Answer 3

您可以为axios设置基本网址

axios.defaults.baseURL ='https://api.example.com/';

因此，下一次此网址将添加您调用api所需的路径

有关详细信息，您可以从下面的链接中看到

https://github.com/axios/axios

Answer 4

我有类似的问题。我的解决步骤如下：删除文件夹.nuxt +删除浏览器中的缓存换

  axios: {
     baseURL: 'http: // localhost: 8080/api'
   }

它按预期工作。在此之前，我尝试了很多方法，例如社区教程，但效果不佳。

Answer 5

如果有人打算致电axios，请通过dispatch store / index.js致电

   export const actions = {
     // nuxt server Init only works on store/index.js
     async nuxtServerInit ({dispatch}) {
         let response = await dispatch ('member / list', {page: 1});
         console.log (response);
       }
}

模块文件member.js

   async list ({commit}, payload) {
         return await this. $ axios. $ post ('/ user / list', payload) .then ((response) => {
             commit ('fetchSuccess', response);
             return response;
             })
             .catch (error => {
                 return error.response.data;
             });
     },

使用axios api配置文件nuxt.config.js

 axios: {
    baseURL: 'http://localhost:9020/api'
  },

很抱歉，如果答案不正确，但有人需要希望这能解释它们

Answer 6

如果有人想知道如何使axios baseURL与域无关：

这是实现它的简单方式：

axios: {
  baseURL: '/'
}

它可以在localhost:3000/api和any-domain.com/api上使用

Answer 7

我有这样的 nuxt.config.js：

axios: {
    baseURL: "http://localhost:8000/api/",
},

在我的一个组件中，我进行了一个 api 调用，其响应如下：

eachpost: {
   ....
   user: {
      ....,
      avatar: 'users/default.png'
   }
}

这里的头像对象有一个到我的图像的相对路径，但在客户端，我必须有到服务器的绝对路径。所以我在我的组件中编写了以下代码并成功运行。我的照片绝对路径是：http://localhost:8000/storage/users/default.png

<img :src="`${$axios.defaults.baseURL.slice(0,22)}storage/${eachPost.user.avatar}`" :alt="`${eachPost.user.name}`">

如何在nuxt中获取axios baseUrl？

7 个答案: