Vue-cli: Proxy root url

[padinko]

What problem does this feature solve?

devServer.proxy cannot be used to proxy root requests now. It is very usefull when your vue app is under some php project.

What does the proposed API look like?

Webpack DevServer can be set to proxy root requests too: https://webpack.js.org/configuration/dev-server/#devserverproxy
with this config:

module.exports = {
  //...
  devServer: {
    index: '', // specify to enable root proxying
    host: '...',
    contentBase: '...',
    proxy: {
      context: () => true,
      target: 'http://localhost:1234'
    }
  }
};

but now this config throw error:

When `proxy` in package.json is an object, each `context` object must have a `target` property specified as a url string

[LinusBorg]

Your config is simply wrong. https://cli.vuejs.org/config/#devserver-proxy

  proxy: {
    '^/': { 
      target: 'http://localhost:1234'
    }
  }

[padinko]

This config will not proxy the root request..

here is my config:

    devServer: {
        index: '',
        host: process.env.SERVE_DOMAIN,
        port: process.env.SERVE_PORT,
        proxy: {
            '^/': {
                target: process.env.APP_URL,
                ws: true,
                changeOrigin: true,
            },
        },
    },

problem is when I open http://SERVE_DOMAIN:SERVE_PORT (i.e. http://localhost:8080 ) dev server returns:
Cannot GET /

instead of pass proxy to APP_URL

If you want to proxy this request too, you need to pass index: '' and context function which return true/false, when server should proxy request.

vue-cli don't allow to pass context function, that's the problem

EDIT:
you can check example here https://webpack.js.org/configuration/dev-server/#devserverproxy search root proxying

[probil]

@padinko @LinusBorg I have the same issue. Due to iterative migration from browserify + express (ejs) to vue/cli I need to proxy root path

I can't just convert whole app to SPA (it will take a lot of time) and some pages still handled by express.

I've tried a lot of options and nothing helps

[probil]

@padinko Solved it this way (for now)

const proxyMiddleware = require('http-proxy-middleware')

const PROXY = 'http://localhost:3000'

module.exports = {
  devServer: {
    index: '',
    serveIndex: false,
    historyApiFallback: false,
    progress: false,
    proxy: {
      '^/': {
        target: PROXY,
        ws: false,
        changeOrigin: true
      }
    },
    staticOptions: {
      redirect: false
    },
    after: app => app.use('/', proxyMiddleware(PROXY))
  },
}

Not the best way but at least it works fine in my case

[rustybox]

The workaround suggested by @probil no longer appears to work.

If I create a webpack config with the following and run with webpack-dev-server everything is fine

But trying to do the same in vue.config.js it's broken.

module.exports = {
  devServer: {
    index: '',
    proxy: {
      context: () => true,
      target: 'http://localhost:60171'
    }
  }
}

Edit: Tested with vue-cli 4.0.0-rc.7, no good there either

I got the setup I required making use of https://github.com/deraw/vue-cli-plugin-proxy

Massive thanks to @deraw

[ejez]

The problem seems coming from prepareProxy.js, hacking this file with the following:

  function mayProxy (pathname) {
...
-    return !(isPublicFileRequest || isWdsEndpointRequest)
+    return !(isWdsEndpointRequest)
  }

and using the following in vue.config.js:

  devServer: {
    proxy: {
      '/': {
        target: 'http://localhost:8000'
      }
    }
  }

works fine for root path proxying

[mattboothman]

I guess the way things are now, it's impossible to override context.

Would it be feasible to have an additional option, say, proxyRoot. If true and if the request path matches the proxy path, the request is proxied, ignoring maybePublicPath/isPublicFileRequest.

module.exports = {
  devServer: {
    proxy: {
      "/": {
        proxyRoot: true,
        target: 'http://localhost:51666'
      }
    }
  }
};

so GET / would then be proxied.

Another solution is to check if maybePublicPath resolves to a directory, check that an index.html file exists to serve and if not, proxy the request. Perhaps a notice can be shown in the console in this case.

[wnghdcjfe]

The problem seems coming from prepareProxy.js, hacking this file with the following:

  function mayProxy (pathname) {
...
-    return !(isPublicFileRequest || isWdsEndpointRequest)
+    return !(isWdsEndpointRequest)
  }

and using the following in vue.config.js:

  devServer: {
    proxy: {
      '/': {
        target: 'http://localhost:8000'
      }
    }
  }

works fine for root path proxying

this is not working

[xiazhibin]

any idea?

[wmzy]

Note that requests to root won't be proxied by default. To enable root proxying, the devServer.index option should be specified as a falsy value:

module.exports = {
  //...
  devServer: {
    index: '', // specify to enable root proxying
    host: '...',
    contentBase: '...',
    proxy: {
      context: () => true,
      target: 'http://localhost:1234'
    }
  }
};

See more: https://webpack.js.org/configuration/dev-server/#devserverproxy