js通信——同源/跨域

一、同源策略限制

同源：协议、域名、端口号都相同。
同源策略限制：从一个源加载的文档或脚本与另一个源的资源进行交互。
限制：1.cookie、localstorage、indexDB不能获取；2. ajax请求不能发送；3.DOM无法获得。

二、前后端如何通信

ajax 同源、fetch、webSocket 不限制同源、CORS 支持同源、不同源

三、跨域通信

1. jsonp
   借助调用外源接口，将callback作为参数返回服务端。

let script = document.createElement('script')
let url = ""
//加上回调方法好拿到数据
script.src = `${url}?callback=cb`
//添加这个脚本到文档里去
document.head.appendChild(script)
function cb(data){
    console.info("jsonp",data)
}

2. iframe的hash：把数据附属在URL的hash上。

// 在A窗口中：
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';
// 在B(iframe)窗口中：
window.onhashchange = function () {
  var data = window.location.hash;
};

3. postMessage-结合iframe使用
   // 窗口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);
4. 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.');
};

5. CORS--目前最常用
   服务端设置Access-Control-Allow-Origin字段，标识允许请求的来源域。比如Access-Control-Allow-Origin: 'http://foo.com'，*表示允许来自任意域的请求。
   设置了源，客户端就可以用ajax请求了。