Vue-cli: Document devServer.proxy default values for changeOrigin etc.

[tecoholic]

Version

3.0.0-rc.3

Reproduction link

https://jsfiddle.net/tecoholic/y76qcsha/

Steps to reproduce

Set the proxy in vue.config.js as

module.exports = {
  devServer: {
    port: 4000,
    proxy: {
      "/api": {
        target: "http://localhost:5000/"
      },
      "/users": {
        target: "http://localhost:5000/"
      }
    }
  }
}

Now all the requests to localhost:4000/user and /api should be proxied to the localhost:5000

What is expected?

By default http-proxy-middleware configures the proxy with changeOrigin: false, so a request should be proxied without changing the origin. The response should be:

curl -I http://localhost:4000/users/login
HTTP/1.1 301 MOVED PERMANENTLY
X-Powered-By: Express
server: gunicorn/19.8.1
date: Sun, 15 Jul 2018 05:11:22 GMT
connection: close
content-type: text/html; charset=utf-8
content-length: 275
location: http://localhost:4000/users/login/

What is actually happening?

curl -I http://localhost:4000/users/login
HTTP/1.1 301 MOVED PERMANENTLY
X-Powered-By: Express
server: gunicorn/19.8.1
date: Sun, 15 Jul 2018 05:09:52 GMT
connection: close
content-type: text/html; charset=utf-8
content-length: 275
location: http://localhost:5000/users/login/

Notice the port 5000 in the response.

---

When I update the config to read

module.exports = {
  devServer: {
    port: 4000,
    proxy: {
      "/api": {
        target: "http://localhost:5000/"
      },
      "/users": {
        target: "http://localhost:5000/",
        changeOrigin: false
      }
    }
  }
}

I get the expected response without change of the Origin. By default the changeOrigin flag is supposed to be off, but I have to set it off explicitly when using vue-cli-service serve.

[Akryum]

I'm not sure I understand what your issue really is. It is expected behavior that requests will be made to localhost:5000 instead of localhost:4000 with the configuration you provided. More info on webpack dev server proxy: https://webpack.js.org/configuration/dev-server/#devserver-proxy.

[LinusBorg]

@akryum Hie issue is that we set changeOrigin: true as a default for all proxy settings, while the default for the webpack-dev-server implementation (and the underlying proxy lib it's using) is false.

@tecoholic we chose this default because our experience from the previous cli version was that people very, very often have problems with CORS when using the proxy option, and changeOrigin: true solves most of those.

We could document this better I think

[tecoholic]

@LinusBorg Thank you so much. Yeah. Adding it in the docs would be of great help.

[zouhangwithsweet]

there is another tip that i think should be adding in the docs.
xfwd: false!
when your webserver is based on flask, it will use its x-headers.
In vue-cli@2,it is false in default, but in @3 it is true