本地代理联调配置

工具：Easy Proxy

配置：项目名称随便写；

           端口号自动生成；

          "target"是目标地址，地址写演示平台的地址；

          "headers"是请求头，其中Referer和Host写演示平台的地址，Cookie的JSEEIONED就是演示平台登陆后请求业务api时携带的值。

举例：

{
  // 目标地址
  "target": "https://10.10.10.10",
  // 支持多个目标代理，若没有匹配，则退回到target字段指定的目标
  "rules": {
    "^/api/one": "http://xxx.xxx.xxx.xxx/api/one",
    "^/api/two": "http://xxx.xxx.xxx.xxx/api/two"
  },
  // https安全验证关闭
  "secure": false,
  // 请求头
  "headers": {
    "Referer": "https://10.10.10.10",
	"Host": "10.10.10.10",
	"Cookie": "JSESSIONID=77427D13C35E2D19A2840CA29153B6A3"
  }
}

配置项请查看 node-http-proxy

同时需要在项目vue.config.js代码中修改proxy对应地址

关于项目里面为什么要通过配置这个地址信息才能进行接口联调的问题，主要是因为本地联调时，前端代码跑在本地服务器的，而后端代码跑在他们自己的服务器（既可能是他们自己的本地服务器，也可能是远程演示平台的服务器）的，而浏览器本身存在同源策略的限制，所以会导致在现在这种前后端分离的开发模式下，前端项目是没法直接访问后端接口的，目前很通用的一个解决方案就是利用服务器之间的请求是不存在同源限制的这个特点来进行处理的，也就是proxy的配置，但原理是利用了webpack的一个webpack-dev-server服务（本地的node服务，这个还做了包括热更新在内的其它功能）来做代理请求的。