同源策略、跨域通信

http/https

1. Cookie 、 localStorage 、 indexDB 等无法读取。
2. 无法获取操作 DOM 。
3. AJAX 请求不能发送。

3、前后端通信

Ajax
WebScoket
CORS

4、如何创建Ajax

XMLHttpRequest

关键代码：
// 1. 第一步，申明xhr对象，考虑ie的兼容性。
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveObject('Microsoft.XMLHTTP');
// 2. 确定请求的方式，get/post等, get参数拼接在url中。
xhr.open(method, url, true)
// 3. 发送数据
3. xhr.send() /  xhr.send(data)
// 判断http的状态
4. xhr.onload = function() {
    // 判断xhr.status
    if(xhr.status === 200 || xhr.status === 304 || xhr.status === 206) {
        // 304,服务器判断本地有缓存
        // 206，请求媒体资源可能返回资源的一部分
    } else {}
}
复制代码

5、跨域通信的几种方式

1. JSONP

// 原理：利用script标签的异步加载来实现。就像在head头中加载script标签一样。
// jsonp,和后台约定的回调函数名
var jsonp = function() {
  // 创建script标签
  var script = document.createElement('script');
  // 给script添加属性，如src，在src中约定callback函数。
  script.src = 'http:/www.test.com/?name=zhangsan&callback=jsonp'
  // script加载完的回调
  script.onload = function() {}
  // script加载失败的回调
  script.onerror = function() {}
  // 将script添加到head标签中
  document.getElementsByTagName('head')[0].appendChild(script);
}
复制代码

2. Hash

// 原理：Hash改变页面不会刷新，search的改变会刷新页面
// 在A中，代码如下
var objB = document.getElementsByTagName('iframe')[0];
objB.src = objB.src + '#' + 'data';
// 在B中，监听hash的变化
window.onhashchange = function() {
  var data = window.location.hash  // 拿到是#后面所有的内容
};
复制代码

3. postMessage

// 如A源向B源发送数据data
// A, 参数含义：发送的数据，接受方的源或者"*"
window.postMessage('data', 'http/B.com'); 
// B: 监听message，判断消息来源，接受数据
window.addEventListerr('message', function(event) {
    console.log(event);
    // event.origin // 消息来源，'http/A.com'
    // event.source // A的引用window
    // event.data  // 接受的数据
}, false)
复制代码

4. WebSocket

// 1. 申明
var ws = new WebSocket('wss://....'); // wss/ws => 加密/不加密
// 2. 建立链接
ws.onopen = function(e) {
  console.log('开始连接...');
  ws.send('hello WebSocket!');
}
// 3. 接受消息
ws.onmessage = function(e) {
  console.log('接收数据：'+ e.data);
  ws.close() // 关闭连接
}
// 4. 关闭连接的回调,确定以关闭连接
ws.onclose= function(e) {
  console.log('连接关闭');
}
复制代码

5. CORS

// 可以简单的理解为支持跨域通信的Ajax
// 原理：浏览器会拦截ajax请求，如果发现是跨域请求，则会在请求头中加一个origin
// 需要用到es6的fetch API
fetch('/api/uri', {
  // 在这里配置跨域参数
  method: 'get',
  params: {}
}).then(res => {
  // 成功的回调
}).catch(error => {
  // 失败的回调
})
复制代码