VueJs - Setting up multiple proxies in vue.config

Question

So i'm making a API call with a proxy like this:

vue.config.js:

module.exports = {
  devServer: {
    proxy: 'http://www.pathofexile.com/'
  }
}

xxx.vue:

axios.get("http://localhost:8080/api/public-stash-tabs").then..

This works! Now when i want to make a API call from a different site as well i'm not sure how to do it. Something like this is what i want:

vue.config.js:

module.exports = {
  devServer: {
    proxy: {
      'http://localhost:8080/one/': {
        target: 'http://www.pathofexile.com/',
        changeOrigin: true
      },
      'http://localhost:8080/two/': {
        target: 'https://api.poe.watch/',
        changeOrigin: true
      }
    }
  }
}

xxx.vue:

axios.get("http://localhost:8080/one/api/public-stash-tabs").then..
axios.get("http://localhost:8080/two/id").then..

But nothing is happening it seems, i'm getting an 404 error because it tries to get something from http://localhost:8080/api/public-stash-tabs

Am i on the right track with this and am i just missing something? Or is this not the way to go?

Dan · Accepted Answer · 2020-04-18 15:43:31Z

10

I haven't seen any examples using the full path like that. Since it is apparently working for you that way (it doesn't for me), I'm not sure this will help you. Try to configure the proxy using relative paths as in the Webpack examples:

devServer: {
  proxy: {
    '/one': {
      target: 'http://www.pathofexile.com/',
      pathRewrite: {'^/one' : ''}
    },
    '/two': {
      target: 'https://api.poe.watch/',
      pathRewrite: {'^/two' : ''}
    }
  }
},

The purpose of pathRewrite here is to remove the matched portion from the destination URL. Otherwise it would be appended like: "http://www.pathofexile.com/one..."

I'm testing these rules on a server now, using your URLs successfully (seeing the POE api response). Don't forget to restart the devServer, e.g. npm run serve

edited Apr 18, 2020 at 15:43

answered Apr 18, 2020 at 14:57

Dan

63.5k18 gold badges113 silver badges122 bronze badges

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

5 Comments

Awesom-o Over a year ago

Hi Dan, nothing changes unfortunately.

Dan Over a year ago

Hi. Ok, I updated my answer. Instead of just theorizing, I'm using these actual rules right now successfully with your axios URLs to see the APIs. Don't forget to recompile npm run serve

Awesom-o Over a year ago

Thank you Dan! These things also look so simple when you see the answer.

Dan Over a year ago

Haha, right? You're welcome. That pathRewrite is big and a bit unintuitive. At first I didn't think of it maybe because somehow you managed to get the absolute path working without it. Glad it works now.

Haider Yaqoob Over a year ago

Please let me know. How to use the same file for deployment. Means after npm run build and then placing the static file in the htdocs of the production server.

Collectives™ on Stack Overflow

VueJs - Setting up multiple proxies in vue.config

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related