Vue.js app is run on http://localhost:8080, whenever I make a GET request using axios to my back-end API, the localhost gets prepended to the URL

Question

I have set axios's base URL to be a variable from my.env file like this:

axios.defaults.baseURL = process.env.VUE_APP_SERVER_API

And this is the .env variable VUE_APP_SERVER_API="http://lolapi.example.com/api"

Whenever I make a GET request like this:

axios.get('/' + action + 'Summoner/' + trimmedSummoner)

The request goes to the wrong URL. It tries to GET from this URL:

http://localhost:8080/summoner/lolapi.example.com/api/getSummoner/TheOnyxKing

instead of this one:

http://lolapi.example.com/api/getSummoner/TheOnyxKing

If I hardcode the correct URL in the GET request, everything works fine:

axios.get('http://lolapi.kabzamalov.com/api/getSummoner/TheOnyxKing')

Any clue why is this happening? Also this doesn't happen if I build the Vue.js project, it only happens during development.

Answer 1

If this is a vue-cli app, try setting publicPath or baseUrl in your production and/or development environment.

https://cli.vuejs.org/config/#publicpath