一、什么是跨域？
1，url的组成
说到跨域就要清楚同源策略，了解同源策略前先要知道URL的构成；如图所示：
-
协议(protocol)：互联网支持多种协议，必须指明网址使用哪一种协议，默认是HTTP协议，HTTPS是HTTP的加密版本，处于安全考虑，越来越多的网站使用这个协议。
-
主机：主机是资源所在网站名或服务器的名字，又叫域名。
document.location.host -
端口：同一域名下面可能包含多个网站，它们之间通过port分开。
document.location.port -
路径：路径是资源网站的位置。如上图所示：
document.location.pathname -
查询参数：是提供给服务器的额外参数。参数的位置在路径后面，两者之间使用？分隔。
document.location.search -
锚点：网页内部的定位点，浏览器加载页面以后，会自动滚动到锚点所在的位置。锚点是通过网页元素的id属性命名的。
2，同源策略
如果两个URL的协议、主机(域名)、端口都相同的话，那么这两个URL是同源。
3，跨域
当两个URL的协议、域名、端口三者之间任意一个不同即为跨域。
二、跨域的场景有哪些？
1，项目上线后，访问地址与接口请求地址不一致，存在跨域
2，项目开发阶段，前后端联调接口，存在跨域
3，iframe跨文档数据通信
三、解决方案
(这里不给出具体代码，因为方法唯一，解决的代码方案不唯一)
1，CORS(跨源资源共享)
当项目上线后，部署访问的地址与接口请求地址存在跨域，这种一般都是需要服务端（**后端人员）**设置允许服务器除了自己以外的其它域名也可以访问加载这些资源。
2，代理
项目开发阶段，因为本地localhost与请求接口地址存在跨域，一般是配置代理服务器或者使用webpack配置proxy来解决跨域。
3，JSONP
JSONP是利用script标签没有跨域限制的”漏洞“来达到与第三方通信的目的。仅支持get，目前项目开发中会根据项目情况使用（很少使用）。
4，window.postMessage
这个主要应用在页面中嵌入的iframe页面与嵌入层页面之间的通信，通过postMessage()可以安全的实现跨源通信。当然，这种应用场景在大厂中会见到，小厂中应该很难遇到**。**iframe页面中需要植入window.postMessage()向外发送信息，嵌入的页面需要通过window.addEventListener来监听接收这些信息。具体开发可参考MDN。
以上是我个人在项目开发中的遇到的并按个人思路进行了总结，也参考了一些文章资源，有问题请大家积极指正，我会虚心学习并验证。
