浅显易懂、vue-cli跨域解决

前言

解决跨域我想在坐的各位都会听说过几个解决跨域的方法
有什么 cors后端配置（加几个请求头）、jsonp（利用script的src属性）、还有vue-cli前端配置。

本文讲述的就是vue-cli前端配置的方式解决跨域

其实一说跨域就要想到很多问题

1. 跨域是什么？
2. 为什么会产生跨域？
3. 如何解决跨域
   …

下面会 一 一 解答

步入正题

跨域是什么？

跨域其实就是违背了浏览器的一种策略，这种策略就是同源策略（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全家桶相关，还请持续关注！
感谢阅读，若有错误可以在下方评论区留言哦！！！