Vue application is dropping Axios baseURL

Question

I'm muddling my way through implementing JWT authentication in a new Vue app and am running into an issue. I'm working off of the webpack CLI template FWIW.

In my main.js I have the following code after declaring my Vue app:

window.axios = axios
window.axios.defaults.baseURL = 'https://example.com'
if (localStorage.getItem('token') !== null) {
  window.axios.defaults.headers.common['authorization'] = 'Token ' + 
    localStorage.token
}
Vue.router = router

This works fine when I log in, however after I'm redirected post-login (/sign-up) and then navigate to a new page (/sign-up/inventory) I try the following axios call and get a 404 because the baseURL can no longer be found.

axios.get('myapi/myreport/mydata/').then(function (response) {
  console.log(response)
})
  .catch(e => {
    console.log(e)
  })
}

If I log window.axios.defaults.baseURL just prior to the axios call I get an error ("Cannot read property 'defaults' of undefined") so presumably axios isn't even loading? What should I be checking in order to trouble-shoot this?

Just for clarity's sake I am importing axios on my inventory.vue component prior to making the call. — Trevor Bodily

Trevor Bodily Trevor Bodily · Accepted Answer · 2017-04-18T17:28:08

I moved the axios code up up above my app instantiation on main.js and that seems to have fixed it.

Vue application is dropping Axios baseURL

1 Answers