关于跨域

关于跨域这个问题，首先应该从同源策略开始说起。同源策略是限制不同源之间的特定操作，是为了保护用户信息的安全，防止恶意的网站窃取数据。

什么是同源？同源是指协议、域名、端口都相同。

而特定操作则是：1.读取cookie、localstorage、indexDB。 2.获取DOM元素。 3.发送ajax请求。

跨域方式
JSONP
       JSONP是利用浏览器对script的资源引用没有同源限制，通过动态插入一个script标签，当资源加载到页面后会立即执行的原理实现跨域的。JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

　　JSONP只支持GET请求而不支持POST等其它类型的HTTP请求,它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题，JSONP的优势在于支持老式浏览器，弊端也比较明显：需要客户端和服务端定制进行开发，服务端返回的数据不能是标准的Json数据，而是callback包裹的数据。

function addScriptTag(src) { 
  var script = document.createElement('script'); 
  script.setAttribute("type","text/javascript");
  script.src = src; document.body.appendChild(script);
 } 
window.onload = function () { 
addScriptTag('http://example.com/ip?callback=foo'); 
}
function foo(data) {
 console.log('Your public IP address is: ' + data.ip); 
};

CORS
       CORS是现代浏览器支持跨域资源请求的一种方式，全称是"跨域资源共享"（Cross-origin resource sharing），当使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。
　　CORS与JSONP的使用目的相同，但是比JSONP更强大，CORS支持所有的浏览器请求类型，承载的请求数据量更大，开放更简洁，服务端只需要将处理后的数据直接返回，不需要再特殊处理。
WebSocket
       WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。
      下面是一个例子，浏览器发出的WebSocket请求的头信息（摘自维基百科）。 GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com
      上面代码中，有一个字段是Origin，表示该请求的请求源（origin），即发自哪个域名。

正是因为有了Origin这个字段，所以WebSocket才没有实行同源政策。因为服务器可以根据这个字段，判断是否许可本次通信。如果该域名在白名单内，服务器就会做出如下回应。 HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat
window.postMessage
这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。
主窗口通过postMessageAPI向异域的窗口发送数据：
// window_1 域名为 http://winodow1.com:8080 window.postMessage("Hi, How are you!", "http://window2.com:8080")
postMessage函数接收两个参数，第一个为要发送的信息（可以是任何JavaScript类型数据，但部分浏览器只支持字符串格式），第二个为信息发送的目标地址。也可以设为*，表示不限制域名，向所有窗口发送。
子窗口向父窗口发送消息的写法类似。 window.opener.postMessage('Nice to see you', 'http://aaa.com');
父窗口和子窗口都可以通过message事件，监听对方的消息。 window.addEventListener('message', function(e) { console.log(e.data); },false);
message事件的事件对象event，提供以下三个属性。
event.source：发送消息的窗口
event.origin: 消息发向的网址
event.data: 消息内容

event.origin属性可以过滤不是发给本窗口的消息。

window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
 if (event.origin !== 'http://aaa.com') return; 
 if (event.data === 'Hello World') { 
event.source.postMessage('Hello', event.origin); 
} else { 
console.log(event.data);
 } 
}