前言
在前后端通信的时候，由于浏览器的同源策略限制，很多时候我们都有跨域的需求，而不同的跨域方法，适用于不同的跨域场景。
JSONP
JSONP的原理就是创建一个script标签，从而借助这个脚本请求去实现跨域的，因为请求静态js文件不受同源策略的限制。
它只支持get方法跨域，而且不方便监听错误和HTTP状态码等
let script = document.createElement('script')
let url = ""
//加上回调方法好拿到数据
script.src = `${url}?callback=callback`
//添加这个脚本到文档里去
document.head.appendChild(script)
function callback(data){
console.info("jsonp",data)
}
这里有一点要注意，使用了jsonp的话打开chrome的network抓包会发现response是callback&&callback(...),这就是jsonp中的p(padding)的含义：填充进脚本的json。
CORS参考资料
目前最常用的跨域解决方案
服务端设置Access-Control-Allow-Origin字段
postmessage
HTML5新增的跨域方案
// 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
window.postMessage('data', 'http://B.com');
// 在窗口B中监听
window.addEventListener('message', function (event) {
console.log(event.origin);
console.log(event.source);
console.log(event.data);
}, false);
通常也是结合iframe用，相关文章
WebSocket参考资料
独树一帜
var ws = new WebSocket('wss://echo.websocket.org');
ws.onopen = function (evt) {
console.log('Connection open ...');
ws.send('Hello WebSockets!');
};
ws.onmessage = function (evt) {
console.log('Received Message: ', evt.data);
ws.close();
};
ws.onclose = function (evt) {
console.log('Connection closed.');
};
url的hash
适用于简单的场景
// 在A窗口中：
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';
// 在B(iframe)窗口中：
window.onhashchange = function () {
var data = window.location.hash;
};
