一、跨域是什么？

跨域问题的出现是因为浏览器的同源策略问题，所谓同源:就是两个页面具有相同的协议（protocol），主机（host）和端口号（port），它是浏览器最核心也是最基本的功能，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击。

二、devServer的作用

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

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

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。
更多的代理控制行为，也可以使用一个 path: options 成对的对象。详细情况可以去官方文档查询：https://cli.vuejs.org/zh/config/#devserver

三、如何解决跨域问题

在vue中使用proxy进行跨域的原理是：将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。
　
在vue开发中实现跨域：在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域

代码如下（示例）：

ws:表示WebSocket协议；changeOrigin:true;表示是否改变原域名；

module.exports = {
  devServer: {
    proxy: {  //配置跨域
      '/api': {
        target: 'https://你请求的后台地址.com',  //这里后台的地址模拟的;应该填写你们真实的后台接口
        changOrigin: true,  //表示是否改变原域名
        ws: true,//表示WebSocket协议
        pathRewrite: {
          /* 重写路径，当我们在浏览器中看到请求的地址为：/api/…… 时
            实际上访问的地址是：http://"你请求的后台地址.com/……",因为重写了 /api
           */
          '^/api': ''
        }
      },
    }
  },
}