Vue-resource and http-proxy-middleware not routing to backend - proxy

Question

I am new to Vue js and writing a front end for a simple task tracker app. I am trying to use vue-resource and http-proxy-middleware to have the app connect to my backend. Backend is on port 3000, and the Vue js front end is on port 8080.
I used the proxy set up described on the Vue docs.
The method:
saveTask() {
this.$http.get('/api', {title: this.taskTitle})
.then(response => {
console.log("success");
}, response => {
console.log("error");
});
}
My Proxy Table: (in config.index.js under dev)
proxyTable: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
When I start up the server I see:
[HPM] Proxy created: /api -> http://localhost:3000
[HPM] Proxy rewrite rule created: "^/api" ~> ""
> Starting dev server...
On the request:
GET http://localhost:8080/api 404 (Not Found)
So it looks like the proxy is not working. Any help greatly appreciated.

Answer 1

Your setup looks good and the requests should look like they're coming from 8080 since it is a proxy.
Are you sure something should be returning where you're looking? I have literally the same setup and it works.
My guess is since http://localhost:8080/api can't be found either can http://localhost:3000 since they're the same thing.
If that doesn't solve your problem you can dig a little deeper and debug and see if anything looks funny there.
proxyTable: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
logLevel: 'debug',
pathRewrite: {
'^/api': '',
},
},
},
Here goes a shot of everything working with my stuff:

Answer 2

what worked for me was setting up a vue.config.js file on the root dir of the vue project (that is at the same level that pacakge.json) and within that file I used this code:
module.exports = {
devServer: {
proxy: {
"^/api": {
target: "http://localhost:3000",
ws: true,
changeOrigin: true
}
}
}
}
now that the proxy was setup in the vue app the request would reach my express server :D