Axios Base URL not working

[whatsaaaa]

Hi,

I have a rather strange behavior using this boilerplate and axios. What I wanted to achieve is to configure base url for my applications inside main.js file. This base url should point to .NET Core application that i run on my machine. For simplicity lets say I am running vue app on localhost:8080 and .net core app on localhost:3000.

Inside main.js I configured axios like this:

import Axios from 'axios' 
...
Axios.defaults.baseURL = 'http://localhost:3000/api'

Also I modified the Vue, so any vue instance can call it via $http but this should not be a problem.

Vue.prototype.$http = Axios

Above configuration works when I run my application, I am getting data from my .NET Core API endpoints, I can login/logout with API, etc.

But there is one problem. When I do a reload (f5, hard refresh), I enter some route directly in browser or I attempt to hit login route with already logged in state, I get an 404 error because it tries to send AJAX request to localhost:8080 instead of localhost:3000

I am getting this 404 error only for one request and that request is getting sent from vuex inside the init function for the auth module.

Action is trigger via this line of code

dispatch('validate')

As the comments and documentations for this boilerplate suggests this init functions is called when the app starts so my best guess is that somehow it gets called before the axios config is applied or am I missing something?

I attempted to surround the call for validate action inside a setTimeout method with 1ms delay and with that small delay it works? I don't receive the 404 error for /auth request.

If you need any more information, or more code snippets I will provide them for you.

Thanks.

[chrisvfritz]

The dev server takes care of proxying /api so that Axios and any other XHR will just work without configuration. See these docs for more info.