跨域的方式

说到跨域就不得不提一个东西——同源策略。

什么是同源策略？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

Cookie、LocalStorage 和 IndexDB 无法读取
DOM 和 Js对象无法获得
AJAX 请求不能发送

虽然同源策略提高了安全性，但是业务和开发中总会遇到需要跨域的场景，今天大概记录下常见的跨域方式的原里，具体实现待以后有机会补充。

1. jsonp

利用脚本src可以跨域的特性，前端在页面中插入一个script标签，和后端商定好函数名，我们在全局定义这个函数，后端返回执行这个函数的js代码，参数是需要传输的数据。

2. location.hash + iframe

利用hash值变化页面不刷新的特性，配合window.onhashchange事件做到跨域传输数据。

3. window.name + iframe

利用name值在不同的页面（甚至不同域名）加载后依旧存在的特性，并且可以支持非常长的 name 值（2MB）。

4. postMessage

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

页面和其打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递

postMessage(data, origin)需要和window.addEventListener('message', function(){})配合使用

5. WebSocket

WebSocket是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。

6. CORS

跨域资源共享，可以看作是ajax的升级版。

CORS首先分为简单请求和非简单请求。

只要同时满足以下两大条件，就属于简单请求：

（1) 请求方法是以下三种方法之一：

HEAD
GET
POST

（2）HTTP的头信息不超出以下几种字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

简单请求后端需要设置以下属性：

Access-Control-Allow-Origin

非简单请求后端需要设置以下属性：

Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Access-Control-Request-Method
Access-Control-Allow-Headers

前端需要设置withCredentials

1 2	var xhr = new XMLHttpRequest(); xhr.withCredentials = true;

7. Proxy

nginx或者node.js转发请求做代理。

node.js做代理比较常见的就是vue cli中的proxy设置了，配合hosts方便开发。