什么是同源策略、跨域、以及前后端如何通信？

想必解除JS的人不少听到同源策略这个词，今天我们就来总结一波。

什么是同源策略呢？

同源策略是指从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是浏览器用来隔离潜在恶意文件的关键安全机制。
简单来说：协议、域名、端口、属同源，有一个不相同就是不同源，不同源之间的数据交互是被限制的，一切为了安全。

跨源的情况表现有以下几点：
1、cookie、localStorage和IndexDB无法读取。
2、DOM无法获得。
3、AJAX请求不能发送。

前后端是如何通信的呢？

以下几点保障了前后端的正常通信：
1、AJAX 同源通信
2、WebSocket 不受同源策略影响
3、CORS 支持同源也支持跨域

说到这会儿，就不得不提一下，同源策略带来的一个非常大的问题。
因为限制了不同源之间的数据交互，但是又不能不让他们交互。毕竟实际工作中，不同域之间的数据交互还是很有必要的。
所以就出现了跨域通信。

什么是跨域？为什么会出现跨域？

跨域是指从一个域名去请求另一个域名的资源，严格来说，只要协议、域名、端口、任何一个不同，就会被当做跨域。
为什么会出现跨域呢？还是因为上面说到的同源策略，当页面在执行一个脚本的时候，会检查访问的资源是不是同源，不同源，就报错。
实际开发中经常有跨域的情况，因为项目不同，会有很多子域名，各个项目和网站之间需要相互调用对方的资源，避免不了跨域请求。

能跨域的标签有哪些？

有两个神奇的标签，不受同源策略影响。
1、
2、
这两个标签是唯二两个例外，他们可以不受限制的从其他域加载资源。

既然有了跨域，那必定要有解决方法，毕竟，两个标签，并不能解决实际开发中的大部分问题。
所有，又有了下面这个问题。

跨域的解决方案是什么？

1、JSONP
2、Hash
3、PostMessage
4、WebSocked （不受同源策略影响）
5、CORS

值得一提的是JSONP和CORS.

JSONP跨域原理：

它利用了