前端通信类以及跨域的几种方法

什么是同源策略及限制

同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

所谓同源是指，域名，协议，端口（http协议的默认端口是80）相同。

例如一个浏览器的两个tab页中分别打开来百度和谷歌的页面，当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

限制：

Cookie、LocalStorage和IndexDB无法获取。

无法获取和操作DOM。

不能发送Ajax请求。

前后端如何通信

Ajax：同源下的通信方式。

WebSocket：不受同源策略的限制，支持跨域。

CORS： CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。

如何创建Ajax

需要知道以下几点：

XMLHttpRequest的工作原理

兼容性处理（XMLHttpRequest只在高版本的浏览器支持）

事件的触发条件

事件的触发顺序

跨域通信的几种方式

jsonp

Hash

webSocket

postMessage

CORS

1.jsonp

jsonp原理： 通过标签的异步加载来实现。例如在标签中通过中的url加载的js。

实例：

2.Hash（片段识别符）

url的后面的内容就叫Hash。Hash的改变，页面不会刷新。这就是用 Hash 做跨域通信的基本原理(url的?后面的内容叫Search。Search的改变，会导致页面刷新)。

实例：

页面A通过iframe或frame嵌入了跨域页面B。

窗口可以把信息，写入子窗口的片段标识符。

子窗口通过监听hashchange事件得到通知。

同样的，子窗口也可以改变父窗口的片段标识符。

3.postMessage

HTML5引入了一个全新的API：跨文档通信 API（Cross-document messaging）。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。

4.webSocket

WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

Websocket【参考资料】http://www.ruanyifeng.com/blog/2017/05/websocket.html

4.CORS

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

跨域时，浏览器会拦截Ajax请求，并在http头中加Origin。

CORS【参考资料】http://www.ruanyifeng.com/blog/2016/04/cors.html