Proxy proxy configuration and analysis

1. vue-cli 2 is configured in the proxyTable under the file path config/index.js , which is the main configuration entry of the entire project

// node自带路径工具.
var path = require('path')
// 分为两种环境，dev和production
module.exports = {
  dev: {
    // 配置好后一定要关闭原来的server，重新npm run dev启动项目。不然无效。
    proxyTable: {   // 需要代理的接口，可以跨域
      // 用‘/api’开头，代理所有请求到目标服务器
      '/api': {
            target: 'http:xxx.com', // 目标接口域名
            changeOrigin: true, // 是否启用跨域
            pathRewrite: { //这里要理解成用'/api'代替target里面的地址，后面的组件中我们调用接口的时候直接用api代替，比如我要调用'http://40.00.100:3002/user/add'，直接写成'/api/user/add'即可
              '^/api': ''  // 即/api相当于http://40.00.100:3002
            }
        }
     }
  }
}

Note: '/api' is a matching item, because the prefix '/api' is added to the ajax url, but the original interface does not have this prefix, so it is necessary to rewrite the address through pathRewrite, and transfer the prefix '/api' to for'/'. If the interface address itself has a common prefix of '/api', pathRewrite can be deleted.

2. vue-cli 3 is to create a new vue.config.js file in the root directory and configure it in the devServer.proxy object (of course there are other ways). After configuration, it will be automatically integrated with the hidden configuration

module.exports = {
    // cli3 代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换
    devServer: {
      proxy: {
        '/yourapi': {   //代理api，/yourapi的意义在于，声明axios中url已/api开头的请求都适用于该规则，注意是以/yourapi开头，即：axios.post({url: '/yourapi/xxx/xxx'})
          target: 'yourserver',   //服务器真实api地址，即需要请求的目标接口，此处target的意义在于：造成跨域是因为访问的host与我们的请求头里的origin不一致，所以我们要设置成一致，这个具体请看下文
          changeOrigin: true,    //是否跨域，true为开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
          ws: true, // 是否启用websockets，根据实际情况看是否需要配置该项
          pathRewrite: { 
               '^/yourapi': 'https://我是服务器/api'   //重写路径
        // 此处是大部分文章都不会明说的的地方，
        // 既然我们设置了代理，则所有请求url都已写成/yourapi/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢
        // 因此这里的意义在于， 以 /yourapi开头的url请求，代理都会知道实际上应该请求那里，
        // ‘我是服务器/yourapi’，后面的/api根据实际请求地址决定，即我的请求url：/yourapi/test/test，被代理后请求的则是
        // https://我是服务器/yourapi/test/test
          } 
        }
      }
    }
  }

Special attention: yourapi is the same part after requesting the background domain name. I understand that the vue implementation is a key-value method. If it is "/test/api/": { }, then when requesting /test/api/getUserInfo, it is Address target + /test/api/getUserInfo, if the request key does not match, the proxy will be invalid.

Proxy Success Examples

As shown in the figure, you can see that the host in the Request URL is consistent with the origin in the request header, which is why configuring the proxy can solve the cross-domain problem. The reason for the cross-domain is that the host of the request url is inconsistent with our origin, that is, As it is often said, non-same origin, by configuring the proxy, my request becomes a
request for data from 192.168.1.109:8080 (this is my local ip, explain) to 192.168.1.109:8080, which solves the problem of non-same origin The problem.

That is, the proxy server returned the data that we requested from the server to my local machine, and my local machine asked my local machine for the data obtained by the proxy on my behalf, so I no longer need to consider cross-domain.

Supplement: The design principle of vue-cli3 is "0 configuration", remove (hidden) configuration files such as build and config directories, and at the same time, vue-cli3 removes the static folder, adds a new public folder, and indexes.html Moved to public.