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';
就能实现跨域
网友评论