CODEWITHSUNDEEP
vue.jsaxiosnuxt.js
Terry Djony
Terry Djony

Reputation: 2015

How to get axios baseUrl in nuxt?

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?

Upvotes: 27

Views: 56379

Answers (8)

Chhunly Lim
Chhunly Lim

Reputation: 170

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

Upvotes: 0

Supriyo Das
Supriyo Das

Reputation: 121

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

Upvotes: 1

Code4Art
Code4Art

Reputation: 801

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

Upvotes: 16

Tran Hoang Hiep
Tran Hoang Hiep

Reputation: 574

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

Upvotes: 0

Tran Hoang Hiep
Tran Hoang Hiep

Reputation: 574

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.

Upvotes: 2

Andath
Andath

Reputation: 22724

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

Upvotes: 63

Mahamudul Hasan
Mahamudul Hasan

Reputation: 2823

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

Upvotes: 0

jibe
jibe

Reputation: 645

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

this.$axios.defaults.baseURL

Upvotes: 22

Related Questions