search

bencodezen / vue-enterprise-boilerplate

An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.
7.78k stars 1.32k forks source link

Can't setup axios to hit local dev server #98

Closed estyh closed 5 years ago

estyh commented 5 years ago

I can't figure out how to set the API_BASE_URL The docs say to do this: To develop against a local backend server API_BASE_URL=http://localhost:3000 yarn dev

My api is being served by dotnet on a different port, and when I try setting that as the base url following the instructions, chrome devtools show me that I am still hitting localhost:8080 (the port that vue/node is running on) - and fiddler confirms that as well. What is really odd, is that the logs for the dotnet server show some kind of activity, with the cryptic message that the request could not be completed.

I can't find in the code where axios is instantiated, where does it call axios.create to set that base url?

I am also having trouble figuring out how to debug anything with breakpoints. Any advice appreciated!

chrisvfritz commented 5 years ago

Great question! 🙂 Is it possible that your API endpoints don't start with /api? In vue.config.js, we use Webpack's dev server to proxy any endpoints starting with /api to the API_BASE_URL:

{ proxy: { '/api': { target: process.env.API_BASE_URL } } }

We do that as a replacement for setting a base URL with axios.create, because this way, any request, no matter where it's coming from, will be correctly forwarded to the backend.

estyh commented 5 years ago

@chrisvfritz Thanks, that was it - the server endpoints didn't start with /api - now that I changed the route on the server, it works. I also found the cookbook entry for debugging which worked great. https://vuejs.org/v2/cookbook/debugging-in-vscode.html Thanks for the fast response!