Vite: proxy requests to alternate backend

Created on 14 May 2020 · 4Comments · Source: vitejs/vite

Is your feature request related to a problem? Please describe.
How do I proxy api requests to a different backend? Does it require a Vite plugin?

Describe the solution you'd like
In https://cli.vuejs.org/config/#devserver-proxy it details vue.config.js settings to proxy /api/* to http://localhost:4000. I invision something similar:

// vite.config.js:
export default {
  devServer: {
    proxy: {
      '^/api': {
        target: '<url>'
    }
  }
}

Describe alternatives you've considered
A vite plugin seems overly verbose for this task

// vite.config.js:
const proxy = require('koa-proxy')

const myPlugin = ({ app }) => {
  app.use(proxy({
    host: 'http://localhost:4000',
    match: /^\/api\//
  }))
}

export default {
  plugins: [myPlugin]
}

Additional context

bug enhancement

Source

robrich

👍2

Most helpful comment

You can do:

export default {
  configureServer: ({ app }) => app.use(...)
}

Although this is such a common need we may just make it built-in.

yyx990803 on 15 May 2020

👍2

All 4 comments

You can do:

export default {
  configureServer: ({ app }) => app.use(...)
}

Although this is such a common need we may just make it built-in.

yyx990803 on 15 May 2020

👍2

I'm confident I'm doing something wrong. Can you help me find it?

// vite.config.js
const proxy = require('koa-proxy');

export default {
  configureServer: ({ app }) => app.use(proxy({
    host: 'http://localhost:4000',
    match: /^\/api\//
  }))
};

// random-component.vue
... snip
    async doit() {
      const res = await fetch('/api/data');
      const txt = await res.text();
      this.response = txt;
    }

The response is always:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>

<script>
window.__DEV__ = true
window.__BASE__ = '/'
window.process = { env: { NODE_ENV: 'development' }}
</script>
<script type="module" src="/vite/hmr"></script>
<script type="module" src="./main.js"></script>
</body>
</html>

robrich on 15 May 2020

Looks like the internal history API fallback is taking higher priority over the proxy middleware. This will need to be fixed.

yyx990803 on 15 May 2020

👀3

@robrich I made a plugin to proxy requests and it mostly works for me. Check out example directory, I just tried it out with latest version of vite (0.15.3).