同源策略、跨域通讯

一、前言

• 同源策略以及限制
• 如何建立Ajax
• 先后端通讯
• 跨域通讯的几种方式

二、同源策略及限制

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

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

三、先后端通讯

1. Ajax --> Ajax只适合同源通讯
2. WebScoket --> 不受同源策略限制
3. CORS --> 是新的通讯标准,支持同源通讯也支持跨域通讯。

四、如何建立Ajax

1. XMLHttpRequest对象的工做原理。
2. 兼容性处理。
3. 事件的触发条件。
4. 事件的触发顺序。

关键代码：
// 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 {}
}
复制代码

五、跨域通讯的几种方式

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 => {
  // 失败的回调
})
复制代码

六、总结

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