Axios-module: Multiple Proxy baseUrls instead of one with AXIOS calls.

[fuzzybaird]

I am trying to proxy several different API's (through http-proxy-middleware) from my Nuxt app. I like this module because it cleans up the context between the SSR and Client calls. But what I don't understand is how to set which proxy to use per AXIOS request.

nuxt.config.js

  proxy: [
    ['/placeapi', { target: process.env.PROXY_PLACE_API_URL || 'https://maps.googleapis.com/maps/api/place/details/json', pathRewrite: { '^/placeapi': '' } }],
    ['/api', { target: process.env.PROXY_API_URL || 'http://myapi.io', pathRewrite: { '^/api': '/v2' } }]
  ],

I know i could set the baseUrl inside the axios config, but that just forces the url to one of the proxies I want.

For example in my VUEX store, I want to set state with a couple of REST endpoints and avoid CORS issues.

export const actions = {
  async addPlace ({ state, commit, rootState }) {
    // using /placeapi path proxy.
    let { data } = await this.$axios.$get(`/placeapi?placeid=ChIJ3yhwXkVgUocRuHn-Xhidp8A&key=__KEY__`)
    commit('addPlace', data.result)
  },
  async addMeta ({ state, commit, rootState }) {
    // using /api path proxy.
    let { data } = await this.$axios.$get(`/meta`)
    commit('addMets', data.result)
  }
}

_{This question is available on Nuxt.js community (#c54)}

[clarkdo]

You can use http-proxy-middleware, pls check https://github.com/nuxt-community/modules/tree/master/packages/proxy

[fuzzybaird]

@clarkdo I am sorry if I was not specific or clear enough; I am using http-proxy-middleware. It partners with the Axios-Module and sets a default of yourdomain.com/api as the proxy. I want to use multiple proxies. An example could look like this

this.$axios.proxy('/placesapi').$get('/json?more=params')

[pi0]

@fuzzybaird The best option as @clarkdo suggested would be using Proxy. Please see docs for new built-in proxy.

[wienska]

Hello! I've got similar problem -I would like to have two proxy urls but I can't understand how to switch between them.

I have the following config and I would like to make requests to api2 sometimes. How can I pass prefix?

  axios: {
    proxy: true,
    prefix: '/api'
  },
  proxy: {
    '/api/': { target: process.env.API_URL, pathRewrite: { '^/api/': '' } },
    '/api2/': { target: process.env.FORM_URL, pathRewrite: { '^/api/': '' } }
  }

[thunderwin]

I need know as well

[luischinchillagarcia]

I was having the exact same problem and found a few places where they mentioned this working. I understand that you need prefix in order to get a non-dev env to work, however, changeOrigin handled that for me. The following worked for me:

  axios: {
    proxy: true,
    // prefix: '/api' // avoid this
  },
  proxy: {
    '/api/': { target: process.env.API_URL, pathRewrite: { '^/api/': '' } , changeOrigin: true}, // add changeOrigin
    '/api2/': { target: process.env.FORM_URL, pathRewrite: { '^/api/': '' } , changeOrigin: true}  // add changeOrigin
  }

[kimcrab]

Hello! I've got similar problem -I would like to have two proxy urls but I can't understand how to switch between them.

I have the following config and I would like to make requests to api2 sometimes. How can I pass prefix?

  axios: {
    proxy: true,
    prefix: '/api'
  },
  proxy: {
    '/api/': { target: process.env.API_URL, pathRewrite: { '^/api/': '' } },
    '/api2/': { target: process.env.FORM_URL, pathRewrite: { '^/api/': '' } }
  }

No solutions yet?