Change the default base url for axios

Question

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?

Answer 1

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

Answer 2

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);    });