摘自阮一峰老师的博客
http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
http://www.ruanyifeng.com/blog/2016/04/cors.html
同源策略:协议、域名、端口相同
若是非同源:Cookie、LocalStorage 和 IndexDB 无法读取; DOM 无法获得;AJAX 请求不能发送;
解决办法
-
document.domain:适用于Cookie 和 iframe 窗口在一级域名相同,只是二级域名不同的情况下
-
在设置Cookie的时候,指定Cookie的所属域名为一级域名:Set-Cookie:domain='.xxx.xxx'
-
片段标识符(URL的
#
号后面的部分):父子窗口可以互相改变片段标识符,如果只是改变片段标识符,页面不会重新刷新。 -
window.name:只要在同一个窗口里,前一个网页设置了这个属性,后一个网页可以读取它。
-
跨文档通信 API(Cross-document messaging):允许跨窗口通信,不论这两个窗口是否同源。
postMessage方法的第一个参数是具体的信息内容,第二个参数是接收消息的窗口的源(origin),即"协议 + 域名 + 端口"。也可以设为*,表示不限制域名,向所有窗口发送。
-
JSONP
网页通过添加一个
<script>
元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。该请求的查询字符串必须有一个callback
参数,用来指定回调函数的名字。
-
WebSocket
是一种通信协议,使用
ws://
(非加密)和wss://
(加密)作为协议前缀。该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信。存在一个字段是
Origin
,表示该请求的请求源(origin),即发自哪个域名。正是因为有了Origin
这个字段,所以WebSocket才没有实行同源政策。因为服务器可以根据这个字段,判断是否许可本次通信。如果该域名在白名单内,服务器就会做出回应。
-
CORS(跨源资源分享):相比JSONP只能发
GET
请求,CORS允许任何类型的请求。
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。