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 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?
This question is related to
javascript
vue.js
vuejs2
axios
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/',
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);
});
VUE_APP_API_ENDPOINT ='http://localtest.me:8000'
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' })
Source: Stackoverflow.com