前端小知识

 

同源策略：协议、域名，端口、必须相同。

http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

协议http://   域名www.ruanyifeng.com   端口  

目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

一、1级域名相同，二级域名不相同。实现同源策略方法：

1.浏览器允许通过设置document.domain共享 Cookie。

2.通过iframe和window.open打开的页面，通过设置document.domain属性拿到DOM。

二、完全不同源的网站。实现方法：

iframe：

• 片段识别符（fragment identifier）   指的是url里的#后面，只是改变#，页面不会重新刷新。
• window.name属性，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。
• H5的跨文档通信 window.postMessage方法+localstorage

ajax请求只能发给同源的网址。不同源请求的方法：

• JSONP           网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来
• WebSocket通信协议     使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信
• CORS标准（跨源资源分享）    CORS允许任何类型的请求

只要服务器实现了CORS接口，就可以跨源通信。CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

分为简单请求和非简单请求：

简单请求，在头信息之中，增加一个Origin字段。

服务器返回有两种情况：

1、如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。

2、如果Origin指定的域名在许可范围内，服务器返回的响应有

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar

注：CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段为true；一方面ajax请求中，要打开withCredentials属性。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json

浏览器会自动发出一个"预检"请求，服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。服务器返回两种情况，如上。

一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段