前言
解决跨域我想在坐的各位都会听说过几个解决跨域的方法
有什么 cors后端配置（加几个请求头）、jsonp（利用script的src属性）、还有vue-cli前端配置。
本文讲述的就是vue-cli前端配置的方式解决跨域
其实一说跨域就要想到很多问题
- 跨域是什么？
- 为什么会产生跨域？
- 如何解决跨域
…
下面会 一 一 解答
步入正题
跨域是什么？
跨域其实就是违背了浏览器的一种策略，这种策略就是同源策略（Same origin policy），头大 同源策略又是什么鬼
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
——百度百科说的
说白了就是 假如你们家的房子，是不是不允许陌生人进入，如果可以随便进入，那么久有可能被盗了，那么这个时候，锁头和钥匙就出现了为了保证家的安全。
所以我们引出浏览器的同源策略，就是指必须在同一个协议，域名，端口号下，而且三者必须一致的。这个时候，我们就说是同源。
为什么会产生跨域？
也就是 为了网络安全起见，浏览器设置了一个同源策略，规定只有域名，端口，协议全部相同，就叫做同源。当页面在执行一个脚本时，会检查访问的资源是否同源，如果不是，就会报错。可是在实际开发中，经常会有跨域加载资源的需求，避免不了跨域请求，所以就出现了跨域。
如何解决跨域（重点）
用vue-cli（脚手架）创建的项目，新建vue配置文件 vue.config.js(名字固定)
在此配置文件中解决跨域
代码示例
建议：看完下图 理解 在回过来仔细看代码
// 前端解决跨域
devServer:{
// 自己的地址: http://localhost:8080/
// 请求服务地址：http://localhost:5000/students
// 设置代理proxy
proxy:{
//‘/api’请求前缀，只有在端口号后携带/api的url才会去请求目标服务器
'/api':{
target:'目标基础路径',// 例如：http://localhost:8080/ 就是基础路径
// 将请求url上有匹配的字符串替换为 第二个参数
pathRewrite:{
'正则':''},
// 以下不写默认为true ------
ws:true, //用于支持websocket
changeOrigin:true //用于控制请求头中的host值
},
// 例
// 请求地址端口后面带有/demo的url进行跨域操作，请求时将/dome替换为空防止目标服务器没有此文件夹
'/demo':{
target:'http://xxx:5000',
pathRewrite:{
'^/demo':''},
}
// 注意：配置好跨域请求时，在进行请求时要将请求 协议、域名、端口号写成自己的地址
// 例如 axios.get('http://localhost:8080/demo/students')
}
}
说白了 就是vue帮你开一个代理服务器，然后帮你去进行请求，然后把请求出来的数据返回到代理服务器中，代理服务器再把数据返回客户端，即可实现跨域数据访问。
服务器之间是不会产生跨域问题的
画图解析
到这里就结束了，后续还会更新vue全家桶相关，还请持续关注！
感谢阅读，若有错误可以在下方评论区留言哦！！！