同源策略 & 跨域

同源策略

1.浏览器同源策略

同源策略(Same Origin Policy,SOP)也叫单源策略(Single Origin Policy),

是一种用于Web浏览器编程语言（如JavaScript和Ajax）的安全措施，用于保护信息的机密性和完整性。

同源策略可防止网站的脚本访问其他网站上使用的脚本并与之交互。

2.同源的满足条件

满足同源条件，即网站的源（origin）要全部相同，在请求数据时，如果不同源，浏览器会在控制台中报一个异常，提示拒绝访问。

而源包括三要素：

1.协议相同，即浏览器协议，常见的如HTTP协议，HTTPS协议等，如果不是同一协议，则非同源。

2.域名相同，即使是同一网站的不同域名，也会视为非同源，如本地服务器localhost与127.0.0.1非同源。

3.端口相同，最简单的例子也是本地服务器，localhost:8000与localhost:8080即端口不同因此非同源。

跨域

当两个网址非同源时在请求数据时，如果不同源，浏览器会在控制台中报一个异常，提示拒绝访问。

因此我们要进行跨域处理来获得需要的数据，而跨域通常有一下几种方式：

CORS

CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种ajax请求资源的方式，限制必须是IE10以上。

AJAX的扩展，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin；

后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;

浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，

这时我们无法拿到响应数据。一下的Ajax是最常见的CORS方式：

function getData(){ var xhr =new XMLHttpRequest() 

 xhr.open ('GET', 'http://localhost:8080/getData', true) 

 xhr.send() 

 xhr.onload = function(){ 

     appendHtml(JSON.parse(xhr.responseText))

 } }

JSONP

利用

降域

降域仍是解决跨域问题的一种方案，通过双向设置 document.domain 的值，解决主域名下的跨域问题。

比如，有两个二级域名：a.yang.com 和 b.yang.com，可通过设定 document.domain 的值为主域名：yang.com 的方式，突破浏览器的同源策略限制，来获取和操作对方的元素。而其中，document.domain ='yang.com'即降域的形式。

postMessage

postMessage 是 HTML5 中新增方法，可实现跨域通信；

postMessage 并不是向服务器读写资源，只是向外发送消息而已；可以把它当做使用手机发送短信消息，仅此而已。

也就是：A 页面向 B 页面发送了一条消息，B 页面会接受到该消息，如果 B 页面需要该消息，则监听 message；否则无需关心该消息。