跨域

/**
 *  跨域
 * 转自：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
 * 1. 同源策略：协议、域名、端口 三个都相同
 *  三种限制:
 *  （1） Cookie、LocalStorage 和 IndexDB 无法读取。
 *      document.domain设置可获取Cookie的域名
 *  （2） DOM 无法获得。（iframe 或者不同的窗口 ）
 *      1. 片段识别符（fragment identifier）
 *          #fragment  子窗口监听 hashchange
 *      2. window.name
 *          无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。
 *      3. 跨文档通信API（Cross-document messaging）
 *          1. window.opener.postMessage('Nice to see you', 'http://aaa.com');
 *          2. 监听message事件，该事件的event对象包含三个属性：
 *              event.source：发送消息的窗口
 *              event.origin: 消息发向的网址
 *              event.data: 消息内容
 *      4. 通过window.postMessage，读写其他窗口的 LocalStorage
 *  （3） AJAX 请求不能发送
 *      1. JSONP
 *          网页通过添加一个<script>元素，向服务器请求JSON数据，服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
 *          由于<script>元素请求的脚本，直接作为代码运行。
 *          这时，只要浏览器定义了foo函数，该函数就会立即调用。
 *          作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。
 *      2. WebSocket
 *          使用ws://（非加密）和wss://（加密）作为协议前缀。
 *          该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。
 *      3. CORS
 */

//JSONP
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);
};

foo({
  "ip": "8.8.8.8"
});


//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这个字段，所以WebSocket才没有实行同源政策。
 * 因为服务器可以根据这个字段，判断是否许可本次通信。如果该域名在白名单内，服务器就会做出如下回应。
 */
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat



//CORS
//http://www.ruanyifeng.com/blog/2016/04/cors.html
/**
 * 分为两种：简单 非简单
 * 1. 
 * （1) 请求方法是以下三种方法之一：
    HEAD
    GET
    POST
    （2）HTTP的头信息不超出以下几种字段：
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
 */