[Talk is cheap. Show me the code]

前言

前端开发中不可避免的会遇到种种跨域问题，本文旨在简单讲述跨域问题的产生以及我们常见的解决方法（不想看理论知识，请直接跳转到最后Vue相关）。需要注意的是前端是没有办法从根本上解决跨域问题的，希望读完本文能对你有所帮助。

跨域问题的产生

因为浏览器的安全机制（同源策略）会对不同域名下的文件读取进行限制，如果两个资源的协议、端口、主机是相同的即代表两个资源同源。当前后端资源协议、端口、主机不一时就代表两个资源非同源，前端访问后端资源时就会出现跨域问题。

解决思路

01.禁用浏览器安全检查

既然跨域问题是由于浏览器的安全机制存在，那我们禁用掉安全机制检查不就好了嘛，当然这种操作只能是在开发环境中使用，毕竟不可能禁用所有用户的安全检查机制。生产环境将前后端项目打包在一个服务器上即可。 配置如下：
在Chrome浏览器属性--目标中配置

--args --disable-web-security 
复制代码

02.使用JSONP跨域

jsonp解决跨域的原理在于，ajax本身是不可以跨域的，但是jsonp利用来script可以访问跨域资源的特点，比如我们可以通过CDN的方式引入外部的资源库如ElementUI

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
复制代码

利用script来访问跨域资源，并在script链接尾部包装一个callback回调函数，当我们访问这个资源地址时会执行这个callback函数，后台服务器在接收到这个回调函数时，将服务端数据包裹在callback的参数中返回给客户端，于是跨域的问题就解决了，如jqery中$ajax的datatype：jsonp就是利用了jsonp的特性来解决跨域问题。但是这种方法已经很少在使用了（存疑，不过个人的开发经历几乎没有遇到这种方法了），因为jsonp需要后台改动代码才可以实现跨域。

03.其他方式

iframe嵌套通讯、window.name、window.postMessage、服务器上设置代理页面，nginx 反向代理等（nginx 服务内部配置 Access-Control-Allow-Origin：*）实际开发中前端也很少遇到这些情况，所以不再展开讲述。

Vue中我们可以做哪些处理

利用webpack配置解决跨域：

在config--index.js中将proxyTable对象新增到配置中，其实这一步就可以解决跨域了 在target中配置你的开发环境IP，配置之后需要重启你的项目

如果有任何关于本文的意见，欢迎在文章下方留言，我会在看到的第一时间回复。