在学习跨域之前，我们先了解一下同源的概念：所谓同源就是，两个网址对应的协议、和主机对于两个页面是相同的则这两个页面具有相同的源。只要三者之一任意一点有不同，那么就为不同源。出于安全方面的考虑，页面中的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