36

I am using vue-cli webpack-simple template to generate my projects, and I'd like to proxy requests to a separate, backend server. How can this be easily achieved?

Mahmud Adam
  • 3,489
  • 8
  • 33
  • 54
  • 1
    I didn't really take a close look at `vue-cli`'s boilerplate and used [this generator for yeoman](https://github.com/fountainjs/generator-fountain-vue) instead. It got me started even I had little knowledge of webpack/gulp/browser-sync(though there was a few gotchas when I tried to integrate it with backend). I think it's worth a look and choosing between `vue-cli` and it. – JJPandari Oct 30 '16 at 04:02

4 Answers4

65

In @vue/cli 3.x:

  • Create a vue.config.js file in the root folder of your project, if you don't already have one.
  • Have its contents as follows:
// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      "/gists": {
        target: "https://api.github.com",
        secure: false
      }
    }
  }
};

Now any call to (assuming your dev server is at localhost:8080) http://localhost:8080/gists will be redirected to https://api.github.com/gists.


Another example: proxying all calls

Say you have a local backend server that is typically deployed at localhost:5000 and you want to redirect all calls to /api/anything to it. Use:

// vue.config.js
module.exports = {
    devServer: {
        proxy: {
            "/api/*": {
                target: "http://localhost:5000",
                secure: false
            }
        }
    }
};
acdcjunior
  • 132,397
  • 37
  • 331
  • 304
30

If you use webpack template with vue-cli, then you can find the required information in this reference document:

http://vuejs-templates.github.io/webpack/proxy.html

Or instead of changing your template now, you may copy the relevant config from the webpack template into your local webpack-simple template.

EDIT: more info from my local setup

This is what I have in my config/index.js under module.exports:

dev: {
    env: require('./dev.env'),
    port: 4200,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api': {
            target: 'http://localhost:8080',
            changeOrigin: true
        },
        '/images': {
            target: 'http://localhost:8080',
            changeOrigin: true
        },
        // and so on...

The above config runs my vue-cli on port 4200, and I run my server on port 8080.

EDIT: Corrected info about CORS after comment #4 and #5

Note:

  • The changeOrigin option in dev.proxyTable (in webpack config) ensures that you do not need to serve CORS headers on your server API responses.
  • If you decide to omit changeOrigin for any reason, then you need to ensure that your server API includes Access-Control-Allow-Origin: * (or equivalent) in its response headers.

References:

  1. https://stackoverflow.com/a/36662307/654825
  2. https://github.com/chimurai/http-proxy-middleware
Community
  • 1
  • 1
Mani
  • 23,635
  • 6
  • 67
  • 54
  • So it's more difficult to using the webpack-simple template? – Mahmud Adam Oct 29 '16 at 03:27
  • 1
    I think `webpack-simple` is intended to get started with Vue.js. The `webpack` template provides lot more configuration, and even has a [detailed help-page](http://vuejs-templates.github.io/webpack/) for additional info. – Mani Oct 29 '16 at 03:38
  • 1
    As you rightly said, it becomes more difficult later if you start with the simple template and write a lot of code, as you need to do all the additional config work yourself. – Mani Oct 29 '16 at 03:40
  • 1
    We may not need CORS here, I added static file plugin/library to my backend so it can serve `index.html` and made the frontend develop server proxy every single request to backend server. No more CORS, a bit cleaner. – JJPandari Oct 30 '16 at 03:56
  • 1
    Thanks for the info! I just did some quick experiment locally and found that either we need CORS headers, or set `changeOrigin: true` in the proxyTable options for webpack dev. Server proxy is done using [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware) - this github page confirms that `changeOrigin` option changes host headers to server URL (target). – Mani Oct 30 '16 at 04:10
  • @潘俊杰 I corrected my answer above, based on your comments. The server is a lot cleaner without CORS as you rightly said, and also avoids a potential security loophole, just in case the production server ends up serving those CORS headers. – Mani Oct 30 '16 at 04:45
6
module.exports = {

    devServer: {
        proxy: {
            '/api': {
                target: 'http://genius.net',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            },
            '/auth': {
                target: 'http://genius23.net',
                changeOrigin: true,
                pathRewrite: {
                    '^/auth': ''
                }
            },
        }
    }

};
stealthyninja
  • 10,343
  • 11
  • 51
  • 59
Chameera W. Ashan
  • 346
  • 4
  • 7
  • 1
    This is the best answer because it gives the pathRewrite. Unless you are adding /api to the URI of all of your dev servers you will need this. – Eric Goode Sep 08 '20 at 18:01
0

if these answers do not work

try to add http://127.0.0.1:{your port} in my case it would not start without it
Eric Aya
  • 69,473
  • 35
  • 181
  • 253
Kampouse
  • 9
  • 4