如何在nuxt中获取axios baseUrl?

Posted

技术标签:

【中文标题】如何在nuxt中获取axios baseUrl?【英文标题】:How to get axios baseUrl in nuxt? 【发布时间】:2019-01-24 18:54:30 【问题描述】:

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

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

【问题讨论】:

你想用"src":"/upload/1.png"做什么 @Helpinghand 我想显示图像,因为它们运行在不同的端口(api 和客户端)上,我不能使用相对路径 【参考方案1】:

如果您在 nuxt.config.js 中定义:

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

你需要为图像做的就是如下指向它:

:src="`$$axios.defaults.baseURLupload/1.png`"

【讨论】:

赞成,非常好奇的问题,如果 axios 默认已经有一个 baseUrl,为什么要在 nuxt config.js 中显式设置它我已经看到几乎每个 nuxt 示例都这样做【参考方案2】:

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

this.$axios.defaults.baseURL

【讨论】:

【参考方案3】:

如果有人想知道如何使 axios baseURL 域独立:

这是实现它的简单方法:

axios: 
  baseURL: '/'

它适用于localhost:3000/api 以及any-domain.com/api

【讨论】:

你节省了我的时间!非常感谢 这应该有更多的赞成票。在运行时处理 nuxt 中的 baseUrl 确实很乏味。 对我来说,当我尝试这样做时它会调用http:/api/user >:-(【参考方案4】:

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

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

它按预期工作。在此之前,我尝试了很多社区教程之类的方法,但都没有效果。

【讨论】:

【参考方案5】:

你可以为 axios 设置基本 url

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

所以下次这个url会加上你调用api所需的路径

详情请见下方链接

https://github.com/axios/axios

【讨论】:

【参考方案6】:

如果有人要调用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'
  ,

对不起,如果答案不合适,但有人需要希望这能解释他们

【讨论】:

【参考方案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`" :>

【讨论】:

以上是关于如何在nuxt中获取axios baseUrl?的主要内容,如果未能解决你的问题,请参考以下文章

使用 axios 和 nuxt 进行服务器和客户端 API 调用的不同 baseURL

使用 Nuxt.js 进行开发和生产的不同 baseURL

在Nuxt.js组件中获取异步数据

如何在 Nuxt.js 的 axios 插件中访问当前的 fullPath?

NUXT.js 和 Axios 运行时如何避免代码重复?

用 PHP Rest API 反应 axios,如何编写 baseurl [重复]