Dev server proxy
In the last video, we saw how we have separate client and API development servers.
In makes sense then that we code the app on the assumption that both the client and server are on the same host.
So, for example, let's go to our main.js file and if we wanted to call the API, we might do something like:
const response = await axios.get("/items");
/items is an API endpoint.
But even if that endpoint existed on the API, we'd get a 404 error in development because that endpoint would be on the server, which is on port 8070, whereas that request would be implicitly targetting
localhost:8080/items as the command is running from the client.
The solution is to proxy calls to the API server during development. Luckily, this is something that's easy to configure with the Webpack dev server.
The Vue config API allows us to configure a proxy with the
devServer.proxy option. So let's go ahead and add that to the export object.
We'll set the value of the proxy to the server URL.
What this will do is - any outgoing requests to the dev server which are not recognized - before throwing a 404 it will instead try this proxy and send any of those calls to the server instead.