How to get axios baseUrl in nuxt?

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}`">