JS与跨域

前言

在前后端通信的时候，由于浏览器的同源策略限制，很多时候我们都有跨域的需求，而不同的跨域方法，适用于不同的跨域场景。

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;
};