Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

proxy requests to alternate backend #147

Closed
robrich opened this issue May 14, 2020 · 6 comments
Closed

proxy requests to alternate backend #147

robrich opened this issue May 14, 2020 · 6 comments
Labels
enhancement New feature or request

Comments

@robrich
Copy link

robrich commented May 14, 2020 •
edited
Loading

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
@yyx990803
Copy link
Member

You can do:

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

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

@robrich
Copy link
Author

robrich commented May 14, 2020

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>

@yyx990803
Copy link
Member

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

@yyx990803 yyx990803 added bug and removed contribution welcome enhancement New feature or request labels May 14, 2020
@zigomir
Copy link
Contributor

zigomir commented May 15, 2020

@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).

@yyx990803 yyx990803 added the enhancement New feature or request label May 18, 2020
@yyx990803 yyx990803 mentioned this issue May 18, 2020
Closed
@philals
Copy link

philals commented Mar 23, 2021

Anyone coming from search engines see here for docs: https://vitejs.dev/config/#server-proxy

@github-actions
Copy link

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.

@github-actions github-actions bot locked and limited conversation to collaborators Jul 16, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@yyx990803 @robrich @zigomir @philals