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

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.

score 2 · Accepted Answer · answered Jul 05 '17 at 00:50

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:

Thanks for the info, I'll look into it and make sure something is listening on 3000 — Patrick, Jul 05 '17 at 01:46
You were spot on! The route on the backend wasn't listening for the exact route. — Patrick, Jul 05 '17 at 01:55

score 0 · Answer 2 · answered Jun 14 '19 at 17:38

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

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

2 Answers2