想必解除JS的人不少听到同源策略这个词，今天我们就来总结一波。
什么是同源策略呢？
同源策略是指从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是浏览器用来隔离潜在恶意文件的关键安全机制。
简单来说：协议、域名、端口、属同源，有一个不相同就是不同源，不同源之间的数据交互是被限制的，一切为了安全。
跨源的情况表现有以下几点：
1、cookie、localStorage和IndexDB无法读取。
2、DOM无法获得。
3、AJAX请求不能发送。
前后端是如何通信的呢？
以下几点保障了前后端的正常通信：
1、AJAX 同源通信
2、WebSocket 不受同源策略影响
3、CORS 支持同源也支持跨域
说到这会儿，就不得不提一下，同源策略带来的一个非常大的问题。
因为限制了不同源之间的数据交互，但是又不能不让他们交互。毕竟实际工作中，不同域之间的数据交互还是很有必要的。
所以就出现了跨域通信。
什么是跨域？为什么会出现跨域？
跨域是指从一个域名去请求另一个域名的资源，严格来说，只要协议、域名、端口、任何一个不同，就会被当做跨域。
为什么会出现跨域呢？还是因为上面说到的同源策略，当页面在执行一个脚本的时候，会检查访问的资源是不是同源，不同源，就报错。
实际开发中经常有跨域的情况，因为项目不同，会有很多子域名，各个项目和网站之间需要相互调用对方的资源，避免不了跨域请求。
能跨域的标签有哪些？
有两个神奇的标签，不受同源策略影响。
1、<img />
2、<script></script>
这两个标签是唯二两个例外，他们可以不受限制的从其他域加载资源。
既然有了跨域，那必定要有解决方法，毕竟，两个标签，并不能解决实际开发中的大部分问题。
所有，又有了下面这个问题。
跨域的解决方案是什么？
1、JSONP
2、Hash
3、PostMessage
4、WebSocked （不受同源策略影响）
5、CORS
值得一提的是JSONP和CORS.
JSONP跨域原理：
它利用了<script>标签的特性，由服务端返回提前定义好的JS函数调用并且将服务端数据以该函数参数的形式传递过来。
CORS跨站点资源共享
他是跨域问题的解决方案之一，并且是官方方案。
其实本质上是个升级版的JSONP，利用fetch实现，会在你发送不同域名，不同子域名，不同端口，不同协议这几种HTTP请求是触发。
网友评论