如何在nuxt中获取axios baseUrl？

Question

我的 Nuxt.js 项目中有 axios 模块。
我还在 localhost:4040/api 中设置了我的 baseUrl（对于 API），而我的客户端在端口 3000 上运行。
当我在 API 中获取图像数据时，它 returns 是 api 服务器的相对路径，类似于 '/upload/1.png'
{ "src":"/upload/1.png" }

所以，我需要获取 axios baseUrl 并将其与它连接以创建图像的完整路径。
除了硬编码还有什么办法吗？

Answer 1

您可以像这样访问 axios 配置以获得您的 api 基础 URL:

this.$axios.defaults.baseURL

Answer 2

你可以为 axios

设置 base url

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

所以下次这个 url 将添加您调用 api

所需的路径

详情请见下方link

https://github.com/axios/axios

Answer 3

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

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

您只需按如下方式指向图像即可：

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

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;
             });
     },

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

 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？

How to get axios baseUrl in nuxt?

vue.js

axios

nuxt.js