vue2跨域解决方案：proxy代理

前言

前端开发时访问后端接口，会遇到浏览器跨域问题。
在vue项目中，使用 proxy代理 可以轻松解决，只需在vue.config.js配置文件写几行配置，如下所示：

一、vue.config.js

module.exports = {
  devServer: {
    proxy: {
      'baseUrl': {
      /** baseUrl说明
      * 每一个完整的请求地址 = baseUrl + 请求地址
      * eg: 
      *    http://192.168.2.127:80/admin/carManage/add
      *    http://192.168.2.127:80/admin/carManage/edit
      *    http://192.168.2.127:80/admin/carManage/delete
      *    ...
      *    这里 baseUrl = /admin
      *    而 请求地址 = /carManage/add 或 /carManage/edit ...
      */
        target: 'http://192.168.2.127:80',//代理的接口地址
        changeOrigin: true,//允许跨域
        secure: false,
        /** secure说明
        * 若接口地址为http协议，配置secure: false,
        * 若接口地址为https协议，配置secure: true,
        *   一般情况下，配置secure: false,
        *   eg:
        *        上面 target: '【http】://192.168.2.127:80'就是http协议
        */
     }
   }
}

做好前面proxy对象3个属性配置，已经解决跨域问题!
在proxy这个对象下，还有其他属性配置，请参考其他配置

二、如何配置【多个】proxy代理？

module.exports = {
  devServer: {
    proxy: {
      'baseUrl-1': {
        target: '接口地址-1',//代理的接口地址
        changeOrigin: true,//允许跨域
        secure: false
      },
      'baseUrl-2': {
        target: '接口地址-1',//代理的接口地址
        changeOrigin: true,//允许跨域
        secure: false
      }
      //...
      /** 仅需要在proxy对象中，定义不同proxy代理配置！！！
      * 依此类推，可添加任意个proxy代理
      */
   }
}