Vue中前端跨域问题解决方案

最近开发过程中遇到跨域问题，也从网上搜了很多解决方案。最后简单的梳理一下，原理性的也不懂，如有错误的地方，请指正。

//1.在vue.config.js文件中做如下配置
module.exports = {
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: {
      // 配值跨域
      '/api': {
        target: 'http://192.168.2.4:10072/',
        ws: true,
        changOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}
//target: 配置跨域请求的地址
//changeOrigin: 是否跨域
//pathRewrite: 路径重写

//2.具体请求页面如下配置(不需要做特殊配置)
const { data: res } = await this.$axios.post('/api/set/sysManage/settime', {
        username: userInfo.username,
        currenttime: this.nowtime
      })
//每个请求接口前面都需要带上/api,这样请求的时候/api就会替换成target中的'http://192.168.2.4:10072/'