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.

Bill Criswell · Accepted Answer · 2017-07-05 00:50:47Z

2

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:

answered Jul 5, 2017 at 0:50

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Patrick Over a year ago

Thanks for the info, I'll look into it and make sure something is listening on 3000

Patrick Over a year ago

You were spot on! The route on the backend wasn't listening for the exact route.

Luonstreak · Accepted Answer · 2019-06-14 17:38:17Z

0

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

answered Jun 14, 2019 at 17:38

Luonstreak

12 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related