How to get axios baseUrl in nuxt? - vue.js

Question

I have axios module in my Nuxt.js project.
I also set up my baseUrl (for API) in localhost:4040/api while my client is running on port 3000.
When I fetch image data in the API, it returns a relative path to the api server which is like '/upload/1.png'
{
"src":"/upload/1.png"
}
So, I need to get the axios baseUrl and concat it with it to make full path to the image.
Is there any way to do it other than hardcoding it?

Answer 1

If in nuxt.config.js you defined:
axios: {
baseURL:"localhost:4040/api/"
}
All you need to do for the image is to point to it as follows:
:src="`${$axios.defaults.baseURL}upload/1.png`"

Answer 2

You can access axios config like this to get your api base URL:
this.$axios.defaults.baseURL

Answer 3

In case if someone is wondering how to make an axios baseURL domain-independent:
Here is how simply it can be achieved:
axios: {
baseURL: '/'
}
It will work on localhost:3000/api as well as on any-domain.com/api

Answer 4

I had a similar problem.
My resolution step is as follows:
Delete folder .nuxt + remove cache in browser
Changer
axios: {
baseURL: 'http: // localhost: 8080/api'
}
It works as expected. Before that, I tried a lot of ways like community tutorials but not effective.

Answer 5

I had nuxt.config.js like this:
axios: {
baseURL: "http://localhost:8000/api/",
},
in one of my components, I made an api call which responded like:
eachpost: {
....
user: {
....,
avatar: 'users/default.png'
}
}
here avatar object has a relative path to my image, but in the client side, I must have the absolute path to the server.
so I wrote the below code in my component which worked successfully.
My absolute path to the photo was: http://localhost:8000/storage/users/default.png
<img :src="`${$axios.defaults.baseURL.slice(0,22)}storage/${eachPost.user.avatar}`" :alt="`${eachPost.user.name}`">

Answer 6

You just append window.location.origin with your axios url

Answer 7

you can set base url for axios
axios.defaults.baseURL = 'https://api.example.com/';
so next time this url will be add with your required path for calling api
for details you can see from below link
https://github.com/axios/axios

Answer 8

If someone intends to call axios, call it via 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);
       }
}
module file 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;
             });
     },
file nuxt.config.js config with axios api
axios: {
baseURL: 'http://localhost:9020/api'
},
Sorry if the answer is not appropriate but someone will need to hope that this explains them