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?

Solution 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

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

Solution 3

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

Solution 4

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

Solution 5

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/',

View more solutions

Comments

[Majid]

for temporary changing baseURL, you can pass absolute url to the desired method: this.$axios.get('http://new-url.com/items'). No need to pass all the params as an object to this.$axios

[Jack]

So if you don't set the baseUrl in your method, it won't work with relative paths? I can get baseUrl to work if I type in a explicit url like http://server01.domain.com but I have to set up the app on multiple servers, each independent.

[Matias Salimbene]

@Jack I'm dealing with your same scenario, did you find an elegant fix to it?

[Jack]

@MatiasSalimbene I set global to /MyApp/api without setting it in the method. Then set the router to /MyApp

[Andris]

While this changes baseURL, it is same for all build modes. + it changes baseUrl only for this single specific axios request. How it is done correctly and in VUE way, check my answer.

[Ryan]

I've read those Axios docs, but weirdly my baseURL never gets prepended. Everything works fine if I just pretend that the baseURL feature doesn't exist and change my url appropriately.

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.