vue项目配置代理如何解决跨域问题

axios.get("/abc/def");
axios.get("/abc/ghi");
axios.post("/abc/jkm");

devServer: {
    proxy: {
      "/abc": {
        target: "http://XX.XX.XX.XX:8081",
        changeOrigin: true,
        ws: true,
        secure: false,
      },
    },
},

devServer: {
    proxy: {
        "/zzz": {
          target: "http://XX.XX.XX.XX:8082",
          changeOrigin: true,
          ws: true,
        },
        "/xxx": {
          target: "http://XX.XX.XX.XX:8083",
          changeOrigin: true,
          ws: true,
        },
    },
},

// 一般在全局设置里引入，例如main.js，方便第二行的配置被每一个axios请求识别
import axios from "axios";
// 只要发送axios请求，就在请求前加入/api的开头，例如 /zzz/one -> /api/zzz/one
axios.defaults.baseURL = "/api";    

devServer: {
    proxy: {
        "/api": {
            target: "http://XX.XX.XX.XX:8084",
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              "^/api": "",
            },
        },
    },
},

 module.exports = {
     devServer: {
             proxy: 'http://localhost:5000',
     }
 }

//开启代理服务器(方法二)
    devServer: {
        proxy: {
            //  '/yu'为请求前缀，用于控制是不是走代理，想走代理时就在请求前缀前边加上这个请求前缀
            '/yu': {
                target: 'http://localhost:5000',
                pathRewrite: { "^/yu": "" }, //重写路径  匹配以/yu为开头的路径都变为空字符串 
                ws: true, //用于支持websocket
                changeOrigin: true //用于控制请求头中的host值
            },
            '/demo': {
                target: 'http://localhost:5001',
                pathRewrite: { "^/demo": "" },
                ws: true, //用于支持websocket
                changeOrigin: true //用于控制请求头中的host值
            },
        }
    }

getStudents() {
      axios.get("http://localhost:8081/yu/students").then(
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },
    getCars() {
      axios.get("http://localhost:8081/demo/cars").then(
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },

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

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