proxy代理配置及解析

1.vue-cli 2 是在路径为config/index.js的文件下proxyTable里配置的，该文件是整个项目的主要配置入口

// 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
            }
        }
     }
  }
}

注意： ‘/api’ 为匹配项，因为在 ajax 的 url 中加了前缀 ‘/api’，而原本的接口是没有这个前缀的，所以需要通过 pathRewrite 来重写地址，将前缀 ‘/api’ 转为 ‘/’。如果本身的接口地址就有 ‘/api’ 这种通用前缀，就可以把 pathRewrite 删掉。

2.vue-cli 3 是自己在根目录下新建vue.config.js文件，在devServer.proxy对象里配置（当然也有其他方式），配置后会和隐藏的配置自动进行整合

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
          } 
        }
      }
    }
  }

特别注意：yourapi 就是请求后台域名后的相同部分，我理解vue实现是key-value方式，此处如果是 "/test/api/": { }，那么请求的时候 /test/api/getUserInfo，就是地址 target + /test/api/getUserInfo，若请求key对应不上则代理就会无效了。

代理成功的例子

如图，可以看到Request URL中的host 和 请求头中的 origin已经一致了，这就是为什么配置代理可以解决跨域的问题，造成跨域是因为request url的host与我们的origin不一致，也就是常说的，非同源，通过配置代理，我的请求变成了从
192.168.1.109:8080(这是我本地的ip,解释一下)向192.168.1.109:8080请求数据，则解决了非同源的问题。

即代理服务器代替我们请求了服务器的数据返回给了我本机，我本机向我本机请求代理替我拿到的数据，因此我不再需要考虑跨域了。

补充：vue-cli3的设计原则是“0配置”，移除（隐藏）配置文件build和config等目录，同时vue-cli3移除了static文件夹，新增了public文件夹，并且将index.html移动到public中。