关键词：
【中文标题】如何在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`" :>
【讨论】：
使用 axios 和 nuxt 进行服务器和客户端 API 调用的不同 baseURL
】使用axios和nuxt进行服务器和客户端API调用的不同baseURL【英文标题】：DifferentbaseURLforserverandclientAPIcallswithaxios&nuxt【发布时间】：2019-12-2117:09:40【问题描述】：假设我正在开发一个包含多个微服务的平台，Nuxt前端服务就是其... 查看详情
如何在 Nuxt.js 的 axios 插件中访问当前的 fullPath？
】如何在Nuxt.js的axios插件中访问当前的fullPath？【英文标题】：HowcanIaccessthecurrentfullPathinsideofaaxiosplugininNuxt.js?【发布时间】：2020-02-0807:01:42【问题描述】：我正在尝试从Axios的Nuxt插件中获取通过route.fullPath的当前路径。它在一定... 查看详情
JS Axios - 如何在发生错误时获取响应正文？
...用axiosv0.18.0。我的axios代码如下所示：letservice=axios.create(baseURL:"https://baseUrl.azurewebsi 查看详情
带有 Axios 的 Nuxt 在页面加载时不会从 API 获取数据
】带有Axios的Nuxt在页面加载时不会从API获取数据【英文标题】：NuxtwithAxiosdontgetdatafromAPIonpageload【发布时间】：2021-02-1602:20:41【问题描述】：我正在尝试使用NUXT中的axios将数据加载到我的页面中，但加载时没有直接出现我必须删... 查看详情
如何在 Nuxt 插件中使用错误功能？
】如何在Nuxt插件中使用错误功能？【英文标题】：HowCanIuseerrorfunctioninNuxtPlugin?【发布时间】：2018-12-0623:09:54【问题描述】：我正在使用Nuxt和axios-module。我试图通过axios全局拦截器进行全局错误处理。如何在Nuxt插件中使用错误函... 查看详情
无法在 Nuxt 组件中使用 axios 从 api 获取数据
】无法在Nuxt组件中使用axios从api获取数据【英文标题】：Can\'tgetdatafromapiwithaxiosinNuxtcomponents【发布时间】：2021-12-1502:53:48【问题描述】：<template><divid="post"><p>data</p></div></template><script>exportde 查看详情
Tabulator + Nuxt.js：如何在回调中使用 axios？
】Tabulator+Nuxt.js：如何在回调中使用axios？【英文标题】：Tabulator+Nuxt.js:Howtouseaxiosincallbacks?【发布时间】：2020-01-1608:48:53【问题描述】：我尝试在我的Nuxt.js项目中添加Tabulator。我已经完成了下一个组件：<template><divref="table... 查看详情
Nuxt 如何在开发或生产环境中设置 baseURL
】Nuxt如何在开发或生产环境中设置baseURL【英文标题】：NuxtHowtosetbaseURLindevorproduction【发布时间】：2019-07-1305:24:07【问题描述】：这似乎是一个简单的Nuxt问题，但我就是想不通。当运行“NPMrundev”时，我想将AxiosbaseURL设置为“loc... 查看详情
如何在组合 API 的 setup() 中使用 $axios Nuxt 模块？
】如何在组合API的setup()中使用$axiosNuxt模块？【英文标题】：Howtouse$axiosNuxtmoduleinsideofsetup()fromcompositionAPI?【发布时间】：2021-07-2707:35:24【问题描述】：文档说在methods/mounted/etc内部使用this.$axios.$get()，但是在setup()内部调用时会抛... 查看详情
Laravel 无法获取 Nuxt 中 axios FormData 发送的数据
】Laravel无法获取Nuxt中axiosFormData发送的数据【英文标题】：Laravelcan\'tgetdatasentfromaxiosFormDatainNuxt【发布时间】：2021-11-0510:39:37【问题描述】：我尝试从Nuxt向Laravel发送api请求。在我的nuxt上，我的axios配置如下：exportdefaultfunction($axi... 查看详情
在 Nuxt asyncData 中使用 axios 在浏览器刷新时丢失令牌
...6-2304:27:54【问题描述】：我在Nuxt的Axios中使用asyncData从API获取元标记，但我的问题是元描述必须设置在服务器端才能出现在代码中。所以我在我的nuxt页面中添加了以下内容：asyncData(conte 查看详情
用 PHP Rest API 反应 axios，如何编写 baseurl [重复]
】用PHPRestAPI反应axios，如何编写baseurl[重复]【英文标题】：ReactaxioswithPHPRestAPI,howtowritethebaseurl[duplicate]【发布时间】：2021-02-0510:09:32【问题描述】：我正在做一个ReactJS前端应用程序并从使用PHPRestAPI创建的API获取数据，但我的反... 查看详情
使用 Nuxt.js 进行开发和生产的不同 baseURL
】使用Nuxt.js进行开发和生产的不同baseURL【英文标题】：DifferentbaseURLfordevelopmentandproductionwithNuxt.js【发布时间】：2019-06-2805:10:14【问题描述】：如何为开发和生产添加不同的baseURL？这是目前我的nuxt.config.jsmodule.exports=mode:\'universal... 查看详情
NUXT.js 和 Axios 运行时如何避免代码重复？
】NUXT.js和Axios运行时如何避免代码重复？【英文标题】：HowtoavoidcodeduplicationwhenrunningNUXT.jsandAxios?【发布时间】：2020-11-2205:28:43【问题描述】：如果相似的代码（如示例中）在不同的组件中重复，但我在函数参数中传递的名称略... 查看详情
如何在后端使用 Nuxt 和 Django 在我的 axios 请求中发送 CSRFToken？
】如何在后端使用Nuxt和Django在我的axios请求中发送CSRFToken？【英文标题】：HowdoIsendCSRFTokeninmyaxiosrequestsusingNuxtandDjangoonthebackend?【发布时间】：2021-04-1017:08:59【问题描述】：我使用DjangoRest作为后端api，每个API调用都需要在标头中... 查看详情
nuxt.js - 如何在服务器端为所有客户端缓存 axios 调用
】nuxt.js-如何在服务器端为所有客户端缓存axios调用【英文标题】：nuxt.js-Howtocacheaxioscallatserversideforallclients【发布时间】：2020-05-1915:45:59【问题描述】：我正在使用vue+nuxt.js应用程序，我想知道是否可以为所有客户端缓存axioswebser... 查看详情
如何在.onRequest拦截器中使用axios helper setToken
】如何在.onRequest拦截器中使用axioshelpersetToken【英文标题】：howtouseaxioshelpersetTokeninside.onRequestinterceptor【发布时间】：2020-09-2712:19:15【问题描述】：我同时使用nuxt-auth和nuxt-axios模块。我想拦截每个axios请求并检查我的JWT访问令牌... 查看详情
如何在 NuxtJS 中设置全局 $axios 标头
】如何在NuxtJS中设置全局$axios标头【英文标题】：Howtosetglobal$axiosheaderinNuxtJS【发布时间】：2020-09-1210:01:01【问题描述】：我已经尝试了两天了。我是Nuxt的新用户（尽管我已经使用Vue几年了），所以我只是想弄清楚这一切是如何... 查看详情