JSONP实现跨域
原理:
网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。
具体实现方式:
1.定义数据处理函数fun
2.创建script标签,src的地址执行后端接口,最后加个参数callback=fun
3.服务端在收到请求后,解析参数,计算返还数据,输出 fun(data) 字符串。
4.fun(data)会放到script标签做为js执行。此时会调用fun函数,将data做为参数。
JSONP缺点:
1.JSONP复杂,没有ajax直白
2.容易出现XSS攻击,安全性低
CORS
CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种 ajax 跨域请求资源的方式,支持现代浏览器,IE支持10以上。 实现方式很简单,当你使用 XMLHttpRequest 发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin,后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据。
具体实现方式:
1.当使用 XMLHttpRequest 发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin,后台进行一系列处理
2.如果确定接受请求则在返回结果中加入一个响应头:Access-Control-Allow-Origin
3.浏览器判断该相应头中是否包含 Origin 的值,包含则处理响应,我们成功拿到返回的数据。不包含则由于同源策略的限制,无视响应,我们无法拿到数据
CORE优点:实现方便很简单
CORE缺点:只支持现代浏览器,IE10以上的
postMessage
postMessage()是HTML5的一个API,使用这种方法最重要的就是发送消息和接受消息。在页面A中向页面B发送请求,然后在页面B中监听请求并获取A发送的数据,即可实现跨域。
-
页面A发送消息:调用postMessage API向目标窗口B 发送消息
window.postMessage(data, origin)
是页面B接收消息:目标窗口B监听message事件window.addEventListener('message',function (e) { console.log(e.origin,e.data) })
postMessage(data,origin)方法接受两个参数
1.data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果。
2.origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以建参数设置为"*",这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。
降域
对于同一网站下的二级域名等可以使用降域方法进行跨域
document.domain = xxx.com;
比如说http://b.123.com:8080/b.html的iframe嵌套在http://a.123.com:8080/a.html的页面内,此时两个子域不能进行跨域,但是只要给2个子域都加上
document.domain = '123.com';
就能实现跨域