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?

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

Solution 2

You can access axios config like this to get your api base URL:

this.$axios.defaults.baseURL

Solution 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

Solution 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.

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

View more solutions

Comments

[Helping hand]

what do you want to do with "src":"/upload/1.png"

[Terry Djony]

@Helpinghand I want to display the image, since they run on different port (the api and the client), I can't use relative path

[PirateApp]

upvoted, very curious question if axios already has a baseUrl by default, why would you set it explicitly in nuxt config.js i have seen almost every piece of nuxt example do this

[bharat savani]

You save my hours man !! thank you so much

[Vasily Pankratov]

This should have more upvotes. Handling baseUrl in nuxt at runtime is tedious indeed.

[SneakyLenny]

For me it calls http:/api/user when I try that >:-(