Change the default base url for axios

I have configured my axios like this

const axiosConfig = {
  baseURL: 'http://127.0.0.1:8000/api',
  timeout: 30000,
};

Vue.prototype.$axios = axios.create(axiosConfig)

Inside my component, I make a call as

this.$axios.get('items').then()..

Now the above works but I would like to change the baseURL without affecting the global base URL so that in my component I can simply use it without API endpoint so

I've tried

this.$axios.baseURL = "http://127.0.0.1:8000";
this.$axios.get().. //this is still in api endpoint

How do I go about this?

Instead of

this.$axios.get('items')

use

this.$axios({ url: 'items', baseURL: 'http://new-url.com' })

If you don't pass method: 'XXX' then by default, it will send via get method.

Request Config: https://github.com/axios/axios#request-config

Putting my two cents here. I wanted to do the same without hardcoding the URL for my specific request. So i came up with this solution.

To append 'api' to my baseURL, I have my default baseURL set as,

axios.defaults.baseURL = '/api/';

Then in my specific request, after explicitly setting the method and url, i set the baseURL to '/'

axios({
	method:'post',
	url:'logout',
	baseURL: '/',
   })
   .then(response => {
      window.location.reload();
   })
   .catch(error => {
       console.log(error);
   });

1. Create .env.development, .env.production files if not exists and add there your API endpoint, for example: VUE_APP_API_ENDPOINT ='http://localtest.me:8000'
2. In main.js file, add this line after imports: axios.defaults.baseURL = process.env.VUE_APP_API_ENDPOINT

And that's it. Axios default base Url is replaced with build mode specific API endpoint. If you need specific baseURL for specific request, do it like this:

this.$axios({ url: 'items', baseURL: 'http://new-url.com' })

If someone else still needs help with this:

You can change the Axios base URL directly where you want to use it

anotherAxiosRequest(){
 axios.defaults.baseURL = http://wwww.example.com
 axios({
   url:'/cats' //=>  http://wwww.example.com/cats
 })
}

and it will change the base URL

note that this will not change the base URL defined in main.js

From axios docs you have baseURL and url

baseURL will be prepended to url when making requests. So you can define baseURL as http://127.0.0.1:8000 and make your requests to /url

> > > // `url` is the server URL that will be used for the request > url: '/user', > > // `baseURL` will be prepended to `url` unless `url` is absolute. > // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs > // to methods of that instance. > baseURL: 'https://some-domain.com/api/', > >

you can also use this (for nuxt and vue)

this.$axios.defaults.baseURL = 'http://example.com/example'

this worked for me for custom baseURL for one request

async getDataFromServer({ commit }, payload) {
    commit('setLoadingStatus', true)
    try {
      const page = payload.page || 1
      const sort = payload.sort || 'published_at'

      this.$axios.defaults.baseURL = 'http://example.com/example'
     
      const { data } = await this.$axios.get(`/example`)

      commit('setItOnState', data)
    } catch (e) {
      throw new Error(e)
    } finally {
      commit('setLoadingStatus', false)
    }
  },