一、同源策略及限制
源：域名 端口号 协议
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
Cookie、LocalStorage和IndexDB无法读取
DOM无法获得
Ajax请求不能发送
二、前端通信
Ajax 同源通信
WebSocket 不限制同源
CORS 不限制同源
三、跨域通信
JSONP 利用script标签异步加载
1. 给服务端传递一个回调名称
2. 在window以回调名称注册一个全局函数
3. 动态创建script标签
4. 监听脚本加载事件，响应onload，判断onload响应是否成功， 删除函数或变量
5. 在HTML文档中增加此script标签
Hash URL#，快通信，页面不刷新
页面A通过iframe或frame嵌入跨域页面B
A中伪代码：
var B = document.getElementsByTarName('iframe');
B.src = B.src + '#' + 'data';
B中伪代码：
window.onhashchange = function () {
var data = window.location.hash;
};
postMessage HTML5新增
窗口A(http://A.com)向跨域的窗口B(http://B.com)发送消息
window.postMessage('data', 'http://B.com);
在窗口B中监听
window.addEventListener('message', function (e) {
console.log(e.origin); //http://A.com
console.log(e.source); //窗口A的window
console.log(e.data);
}, false);
WebSocket 新标准
var ws = new WebSocket('wss://echo.websocket.org');
ws.onopen = function (e) {
console.log('Connection open ...');
ws.send('Hello WebSockets!');
};
ws.onmessage = function (e) {
console.log('Received Message: ' + e.data);
ws.close();
}
ws.onclose = function (e) {
console.log('Connection closed.');
};
CORS 新标准，支持跨域通信的Ajax
浏览器会拦截Ajax请求，如果这个Ajax请求是跨域的，会在HTTP请求头中加一个origin
fetch(url [, options]);
fetch('/some/url', {
method: 'get',
}).then(function (response) {
//
}).catch(function (error) {
//
});
