同源策略、跨域通信

1、前言

同源策略以及限制
如何创建Ajax
前后端通信
跨域通信的几种方式

2、同源策略及限制

概念：同源策源限制从一个源文件或者脚本如何来与另一个源的资源进行交互，是一个用于隔离潜在恶意文件的安全机制。
源的概念：协议（http/https）、域名、端口。
限制：不是一个源，没有权限操作另一个源的文档。

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

3、前后端通信

Ajax --> 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、跨域通信的几种方式

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

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  // 拿到是#后面所有的内容
};

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)

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('连接关闭');
}

CORS

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

6、总结

本文主要介绍了同源策源的概念以及实现跨域通信的常用方式。