一如前端深似海，从学习前端至今已有4年之余，但是工作经验只有一年多，这一路遇到了很多坑，我是那种不管做什么都喜欢总结的人，所以每次遇坑都记在笔记上，但是零零散散，但是时间久了需要静下来想把一些坑记录整理出来，作为自己的总结，仅是个人的总结，但是经验还是很缺乏，在技术上还不是很深究的那种，如果总结中有表达不明的或者有更好的结解决方案的可以指出，我很喜欢尝试，更多的是发现并改正，以性能更好的的方案解决问题。但是我想了一下第一遍以解决跨域开头。
在前端开发中调试后台api时经常会遇到跨域问题，从刚开始接触框架来，踩了很多坑，比如我刚用vue时，配置了规则，但是不知道请求url会默认自带这个规则参数（如你配置的规则是/api，url会自带/api这个字段），你发先跨域解决了，但是请求的接口是错的。需要强调的是，每次修改跨域规则proxyTable/proxy，都要重新run才能生效。

vue2.0+中解决跨域问题

1.在config/index.js中dev里添加proxyTable规则：(可添加多个规则，对于不同接口的解决方法)
config/index.js:

    dev: {
     // Paths
      assetsSubDirectory: 'static',
      assetsPublicPath: '/',
      proxyTable: {
          //  规则只是用 / api 代替 http://10.8.1.180:8080 这个ip
           '/api': {
                target: 'http://10.8.1.180:8080', // 接口的域名
                  // secure: false,  // 如果是https接口，需要配置这个参数
                  changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
                  pathRewrite: {
                     '^/api': '/api' //路径重写,当你的url带有api字段时如/api/v1/tenant， 
                                     //可以将路径重写为与规则一样的名称，即你在开发时省去了再添加api的操作
                  }  
             },
             '/ucs': {
                  target: 'http://10.8.0.98', // 接口的域名
                  // secure: false,  // 如果是https接口，需要配置这个参数
                  changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
                   pathRewrite: {
                     '^/ucs': ' ' //路径重写，如果你的url没有/ucs这个字段如http://10.8.0.98/v1/tenant，可以这个设置为空的，
                   }
              }
       }
     }
   }

2.使用
请求api：http://10.8.1.180:8080/api/v1/tenant
http://10.8.0.98/v1/tenant
接口封装文件中或者接口请求中：
二次封装的文件中:

// http://10.8.1.180:8080/api/v1/tenant
  export function getStat() {
    return request({
      url: '/api/v1/tenant',
      method: 'get'
    })
  }

// http://10.8.0.98/v1/tenant
export function getStat() {
    return request({
      url: '/ucs/v1/tenant',
      method: 'get'
    })
  }

普通接口直接用：

// http://10.8.1.180:8080/api/v1/tenant
axios.get('/api/v1/tenant').then(res => {
  consoel.log(res)
}).catch(err => {
  console.log(err)
})

// http://10.8.0.98/v1/tenant
axios.get('/ucs/v1/tenant').then(res => {
  consoel.log(res)
}).catch(err => {
  console.log(err)
})

vue3.0中解决跨域问题

vue-cli 3.0中使用方法个vue2.0+的一样，不用的是文件不一样,规则参数为proxy而不是proxyTable了，vue-cli 3.0是在跟package.json文件同级目录下自己创建一个vue.config.js文件来配置规则
以下为vue.config.js:

// vue.config.js
module.exports = {
  // 基本路径
  baseUrl: './',
  outputDir: 'dist', // 构建输出目录
  assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
  lintOnSave: true, // 是否开启eslint保存检测，有效值：ture | false | 'error' 
  devServer: {
    open: true,
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: {
      // dce url
      '/dceAPI': {
        target: 'http://192.168.1.8',
        ws: true,
        changOrigin: true, // 接口跨域
        pathRewrite: {
          '^/dceAPI': '' //路径重写 ''
        }
      },

      // deploy url
      '/api': {
        target: 'http://10.8.1.180:8000',
        // target: 'http://192.168.1.8',
        ws: true,
        changOrigin: true, // 接口跨域
        pathRewrite: {
          '^/api': '/api' //路径重写'/api
        }
      },
    },
    before: app => {}
  }
}

nuxt 中解决跨域问题

nuxt是在vue2.0的通用应用框架，所以跨域规则跟文章第一点写到的vue2.0+中解决跨域是一致
以上仅是个人经验。经验都是不断积累，后续遇到此类问题后续会继续添加修改。