什么是跨域?
提到跨域首先应该了解一个名词叫做同源策略
同源策略:同源策略就是指协议、端口、域名都相同的才是同源。
因此对于协议、端口、域名,其中有一个不同就是跨域了
那跨域的解决方法有哪些,下面是我个人总结和理解的一些方法:
1.JSONP跨域
jsonp跨域的原理就是利用
2.资源跨域共享(CORS)
CORS是一个W3C标准,它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。同时在CORS跨域请求上,浏览器将其分为简单请求和非简单请求,我来分别解释一下简单请求和非简单请求。
简单请求
对于简单请求,浏览器直接发出CORS请求,具体来说就是在头信息之中,增加一个Origin字段
非简单请求
非简单请求是那种对服务器有特殊要求的请求,比如请求方式是PUT或者DELETE,或者Content-Type字段的类型是applicatin/json。
非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为“预检”请求。
3.node.js中间代理跨域
node中间实现跨域代理,原理大致与nginx相同,都是通过启动一个代理服务器,实现数据的转发,也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名,实现当前域的cookie写入,方便接口登录认证。
4.window.postMessage跨域
postMessage是HTML5 XMLHttpRequest level2中的API
并且是为数不多的可以跨域操作的window属性之一,它可以用来解决一下方面的问题:
页面和其它打开的新窗口的数据传递
多窗口之间的消息传递
页面与嵌套的iframe消息传递
用法:postMessage(data,origin)方法接受两个参数
data:html5规范支持任意基本类型或可复制的对象,但部分浏览器只支持字符串,所以传参时 最好用JSON.stringify()序列化。
origin:协议+主机+端口号,也可以设置为“*”,表示可以传递给任意窗口。
5.WebSocket协议跨域
websocket是THML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通信,使用了Socket.io,它很好的封装了webSocket接口。
6.document.domain+iframe跨域
这个方法仅限主域相同,子域不同的跨域应用场景
实现原理为:两个页面都通过js强制设置document.domain为基础主域,就实现了同域。