情景：在写vue cli 中的代理时，百度了好久也没代理上，最终的问题出在路径重写上。特此记录一下，如果有跟我有一样问题的小伙伴，欢迎前来参考，可根据各自情况和实际问题进行调试。
 
接口地址：
 
 
 
 
代理地址为（开发环境）：
 
// .env.development 文件中
 
、
 
VUE_APP_BASE_API 在不同环境（ .env.production文件， .env.staging等文件中）为不同地址。如没有此处，代理地址写死的话，下面的proxy中也要将对应代理地址改掉。如：part2中。
 
 
 
 
 
 
注意：百度上搜的重新路径都是  ‘’  (空路径），一直代理不过去。找了半天发现需要代理到  '/' （根路径）。卡了好久，距离就差了这一点点问题（啊 啊啊啊 啊啊）。
 
 *此处需要根据自己的接口状况来调试代理路径地址
 
 
 
浏览器中接口requestURL显示：
 
 
response中已返回数据：
 
 
 
 
（part2）不需动态改变proxy需代理的路径（即：下图 'api' 位置处）
 
//vue.config.js 文件中
 
 
将地址中       '/api'    代理到      '/'       中.
 
输出为：http://127.0.0.1:8080/userInfo/getUserInfoList.do
 
 

奇怪吧，明明设置了代理，怎么没有生效呢？不是方法不对，而是没有理解proxyTable中节点的意义。其中的“api”节点，这是路由，系统会去根据这个匹配你的地址，匹配上才会生效，proxyTable中可以指定多个路由，一开始会认为这个是规定格式，所以都不会去修改，除非你的api部署地址是这样的“http://localhost:8080/api/*”，恭喜你，你的问题可能解决了，但是根据我的地址是“http://localhost:8080/college/getcollege”，就完蛋了，那么该怎么改，如下：
 
     proxyTable: {
      '/rcpy': {  
        target: 'http://localhost:8080/', //源地址 
        changeOrigin: true, //改变源 
        pathRewrite: {
          '^/rcpy': '/rcpy' //!!!
      }

参考文档：devServer.proxy
 
前端开发接入接口时，难免遇到跨域请求（协议/域名/端口与后台接口不一致），最简单的解决方法是让后台同事将接口设置为可支持跨域请求，待项目上线再关闭。但这也容易造成，开发的这段时间内，其他人也能访问到后台的接口
 
另一种解决方法是在vue-cli中设置代理，我的项目中使用 vue-cli3、axios
 
出现跨域的写法
 
// axios配置文件
axios.defaults.baseURL = 'https://www.demo.com/xxx/xxx'
 
axios.post('Home/ad')
  .then(res => {
  })
  .catch(err => {
  })
 
axios请求 'https://www.demo.com/xxx/xxx/Home/ad'，出现跨域
 
设置代理
 
在项目根目录新建 vue.config.js
 
module.exports = {
  devServer:{
    proxy: "https://www.demo.com/xxx/xxx"
  }
}
 
// axios配置文件，判断当前为开发环境时，由代理提供接口的前缀
axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '' : 'https://www.demo.com/xxx/xxx'
 
axios.post('Home/ad')
  .then(res => {
  })
  .catch(err => {
  })
 
axios通过代理的方式请求 'https://www.demo.com/xxx/xxx/Home/ad'，从而避免跨域产生
 
更多代理控制行为
 
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'www.demo.com/a',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: 'www.demo.com/b',
        ws: true,
        changeOrigin: true
      }
    }
  }
}
 
当请求为 api字符串 开头时候，将代理 <url> 接口
 
// 将请求 www.demo.com/a/api/Home/ad
axios.post('api/Home/ad')
  .then(res => {})
 
// 将请求 www.demo.com/b/api/Home/banner
axios.post('foo/Home/banner')
  .then(res => {})