在学习跨域之前，我们先了解一下同源的概念：所谓同源就是，两个网址对应的协议、和主机对于两个页面是相同的则这两个页面具有相同的源。只要三者之一任意一点有不同，那么就为不同源。出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。接下来我们了解解决跨域的几种方法： 
1、JSONP（JSON with Padding）方式，它是JSON的一种使用方法SONP（JSON with Padding）是JSON的一种”使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.dddd.com 的网页无法与不是 server1.dddd.com的服务器沟通，而 HTML 的script 元素是一个例外。利用<script>元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。 
要注意JSONP只支持GET请求，不支持POST请求。 
2、代理： 
例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.php，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。 
3、PHP端修改header（XHR2方式） 
在php接口脚本中加入以下两句即可： 
header(‘Access-Control-Allow-Origin:*’);（允许所有来源访问） 
header(‘Access-Control-Allow-Method:POST,GET’);（允许访问的方式）

参考原文连接：https://blog.csdn.net/qq_40859799/article/details/81565153 

当开发前端代码已经编写完毕，后端的接口也已经准备完成，我们就可以进行前后端的联调，由于前端和后端的通信属于跨域，数据的交换是无法实现的，此时我们使用proxyTable实现跨域。

使用方法

vue在配置文件中提供了proxyTable来设置跨域，在config文件夹的index.js文件中

此时，在使用axios发送请求，比如下面的情况

操作步骤

1、修改config/index.js里proxyTable

proxyTable: {
   '/api': {
       target: 'http://192.168.42.182:8080',
       changeOrigin: true,
       pathRewrite: {
           '^/api': '/'
       }
   },
}

2、修改config/dev.env.js

module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    API: '"/api"' // 加入这一句
})
设置axios的baseUrl

export default {
    get (url, params) {
        return axios({
            method: 'get',
            baseURL: process.env.API, // 修改这里
            url,
            params,
            timeout: 100000
        }).then((response) => {
             return checkStatus(response)
        }).then((res) => {
             return checkCode(res)
        })
    }
}

4、重启服务器 npm run dev就好啦

原文参考地址：https://blog.csdn.net/u010394015/article/details/81460488 
实现原理

跨域是浏览器禁止的，服务端并不禁止跨域
所以浏览器发给自己的服务端，然后由自己的服务端再转发给要跨域的服务端，做一层代理
vue-cli的proxyTable用的是http-proxy-middleware中间件
============================分割线=========================
在自己的实践中，发现我的项目里并没有config文件夹，也就是没有配置项。这时由于在vue-cli 3.0+版本中已经对项目目录做了简化，这时我们需要自己手动去创建配置文件。在项目根目录下，创建vue.config.js。再在这个配置文件中写proxyTable配置。

原文链接：https://www.jianshu.com/p/d42fcb9b7213