前后端通信的那些事儿

一、同源策略

同源就是当协议、域名和端口都一致时，才算是同源，有一个不同都不是同源。

同源策略官方解释就是，限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用户隔离潜在恶意文件的关键的安全机制。

不是同源，主要会有以下限制：

• cookie、LocalStorage和IndexDB无法读取
• DOM无法获取
• Ajax请求不能发送

二、前后端如何通信

• ① Ajax ，受同源策略限制
• ② WebSocket，不受同源策略限制
• ③ CORS，既支持跨域通信，也支持同源通信

三、如何创建Ajax

创建一个Ajax，主要考虑如下问题：

• XMLHttpRequest 对象的工作流程
• 兼容性的处理
• 事件的触发条件
• 事件的触发顺序

我收藏的 CD :

获取我的 CD
 

创建一个Ajax的基本步骤：

• (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象。
• (2)创建一个新的HTTP请求,并指定请求的方法、URL、是否异步处理请求及验证信息。
• (3)为onreadystatechange 事件绑定方法，监听状态的改变。
• (4)发送HTTP请求。

四、跨域通信的几种方式

• JSONP
  只支持GET请求
  利用script标签支持跨域的属性，用script标签拿到包裹了数据的方法（相当于是返回了一段js代码），在请求中包含callback，服务端注入参数后返回这个回调函数，然后script标签拿到返回的js代码跨域直接运行回调，需要前后端的配合。
• Hash
  原理是利用location.hash来进行传值。在url： http://a.com#helloword中的‘#helloworld’就是location.hash，改变hash并不会导致页面刷新，所以可以利用hash值来进行数据传递，当然传递数据的大小是有限的。
• postMessage

// 窗口A(http://A.com)向跨域窗口B(http://B.com)发送信息
window.postMessage('data', 'http://B.com');

// 在窗口B中监听
window.addEventListener('message', function(event){
     console.log(event.origin); // http://A.com
     console.log(event.source); // A的window
     console.log(event.data); // data
})

• WebSocket
  特点包括：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据。
（5）没有同源限制，客户端可以与任意服务器通信。
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

var ws = new Websocket('wss://echo.websocket.org');

ws.onopen = function(evt) {
    console.log('Connection open...');
    ws.send('Hello world!');
};

ws.onmessage = function (evt) {
    console.log('Received Message' + evt.data);
    ws.close();
};

ws.onclose = function (evt) {
    console.log('Connection closed');
}

• CORS
  为什么CORS能支持跨域通信？
  浏览器会拦截Ajax请求，如果浏览器发现这个Ajax请求时跨域的，它会在HTTP请求头中加一个origin。