Proxy requests to a separate backend server with vue-cli

vue.js, webpack, webpack-dev-server

Solution

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:

- https://stackoverflow.com/a/36662307/654825

- https://github.com/chimurai/http-proxy-middleware

Problem

Original source

Related problems

• webpack-dev-server proxy: context with wildcard