CODEWITHSUNDEEP
javascriptvue.jsvuejs2axios
Geoff
Geoff

Reputation: 6649

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?

Upvotes: 108

Views: 351293

Answers (7)

Harsh Suvarna
Harsh Suvarna

Reputation: 17

You could put in something like...

axios.get("https://your-url", {baseURL:"")

This will override the baseURL in the axios interceptor for this specific axios request.

Upvotes: -1

Carlos Feliz
Carlos Feliz

Reputation: 111

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

Upvotes: 11

mohamadreza javady
mohamadreza javady

Reputation: 1

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

Upvotes: 0

Jonathan Batista
Jonathan Batista

Reputation: 111

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

Upvotes: 2

Shahbaz A.
Shahbaz A.

Reputation: 4356

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

Upvotes: 87

Andris
Andris

Reputation: 4203

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

Upvotes: 15

Vipin Kumar
Vipin Kumar

Reputation: 6546

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

Upvotes: 73

Related Questions