[Vuejs]-Vue, how do I proxy everything excluding a specific path?

by

0👍

✅

I’ve solved this using vue-cli-plugin-proxy. After installing it, I added the following to my vue.config.js.

module.exports = {
    publicPath: '/app',

    pluginOptions: {
        proxy: {
            context: '!/app/**',
            options: {
                target: 'http://127.0.0.1:8000',
            }
        }
    },
}
👤Matt

2👍

You can do this by defining bypass function in your proxy settings like this.

devServer: {
    index: '', // specify to enable root proxying
    proxy: [{
        context: () => true,
        target: 'http://127.0.0.1:8000',
        bypass: (req) => {
          if (req.url.startsWith('/app')) {
            return req.url // do not proxy
          }
          return false
        }
    }],
}
👤Nafees Anwar

1👍

As per Nafees’s answer, the following code enables me to access /app/ and every other URL gets proxied. All except /, which doesn’t get forwarded to the proxy.

module.exports = {
    publicPath: '/app/',

    configureWebpack: {
        devServer: {
            index: '',
            proxy: {
                '/': {
                    target: 'http://127.0.0.1:8000',
                    bypass: function(req, res, proxyOptions) {
                        if (req.url.startsWith('/app/')) {
                            return req.url;
                        }

                        return null;
                    }
                },
            },
        }
    }
}
👤Matt

1👍

Alternatively, you can use Regex to match url excluding a prefix:

devServer: {
    port: 8080,
    proxy: {
        "^(?!/app)": {
            target: "http://127.0.0.1:8000",
            changeOrigin: true
        }
    }
}
👤Mark

Leave a comment