/**
* 跨域
* 转自: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
*/