How to get dev server proxy target inside app?

Question

I'm using iframe in the app, I don't know how to proxy it's src via dev server, therefore I'm doing

const origin = process.env.NODE_ENV === 'production' ? location.origin : 'http://192.168.1.2:8081'

to make the iframe work in development mode, 'http://192.168.1.2:8081' is hard-coded here, I'm looking for a way to reuse the webpack dev server proxy target, an API like getProxyTarget(), but if the iframe's src could be proxied, that's even better!

vue.config.js devServer config:

{
  port: 8055,
  proxy: {
    '/api': {
      pathRewrite: {
        '^/api': '',
      },
      target: 'http://192.168.1.2:8081',
      ws: true,
      changeOrigin: true,
    },
  },
}

The point of having the proxy is that the app doesn't have to know where the requests are really going. What's the context, why do you want to access the target? — jonrsharpe, Jan 14 '21 at 10:37

score 0 · Accepted Answer · answered Jan 15 '21 at 01:37

0

I ended up creating an environment variable:

VUE_APP_PROXY_TARGET='http://192.168.1.2:8081'

and use it inside the app:

process.env.VUE_APP_PROXY_TARGET

answered Jan 15 '21 at 01:37

Wenfang Du

8,804
9
59
90

How to get dev server proxy target inside app?

1 Answers1