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?

Answer 1

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