跨域指的是跨过同源策略，实现不同域之间进行数据交互的过程叫跨域。跨域的实现形式主要有JSONP方法、CORS方法、降域和postMessage等。
1.JSONP
JSONP是一种数据调用方式，是解决跨域交互的方法。网页通过在script标签里添加元素，向服务器请求数据，这种做法不受同源政策的限制，服务器收到请求后，把数据放在一个指定的回调数中返回。
//1.定义出来函数的appendHtml
function appendHtml(news){
var html = ''
for(var i = 0;i<news.length;i++){
html +='<li>' +news[i]+'</li>'
}
console.log(html)
$('.news')innerHtml = html
}
2.创建script标签，src地址执行后端端口，地址的末尾加个参数callback = appendHtml
$(".change").addEventListener("click",function(){
var script=document.createElement("script")
script.src='http://localhost:8080/getNews?callback=appendHtml'
document.head.appendChild("script")
document.head.removeChild("script")
})
3.服务器在收到请求后，解析参数，计算返回数据，输出appendHtml(data)字符串
var www = req.query.callback
if(www){
res.send(www + '(' +JSON.stringify(data)+')')
}else{
res.send(data)
}
4.appendHtml(data)会放在script标签里面当做js来执行，同时调用appendHtml()函数。将data作为参数。
2. CORS
cross origin resource sharing 跨域资源共享。这是W3C的标准，是跨域请求的根本解决方法。相比JSONP只能发get请求，CORS允许发任何类型的请求。对于开发者来说CORS 通信与同源的ajax通信没有差别，代码完全一样。浏览器一旦发现ajax请求是跨源的，会自动在头部添加origin标签，用户无需单独做操作。
工作流程：
-
当使用XMLHttpRequest发送请求时，浏览器会检测到不符合同源策略，于是会加一个请求头origin。
-
后台确认符合策略时，会在返回的数据里添加一个响应头access-control-allow-origin。
-
浏览器判断该响应头中是否有origin值，如果有则接收数据。如果没有，则直接驳回。我们无法拿到数据。
$('.change').addEventListener('click', function () {
var xhr = new XMLHttpRequest()
xhr.open('get', 'http://b.jrg.com:8080/getNews', true);
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
appendHtml(JSON.parse(xhr.responseText))
}
};
window.xhr = xhr
});
如果有则浏览器会处理响应，我们就可以拿到响应数据，
res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080")
//res.header("Access-Control-Allow-Origin", "*")
3.降域
如果在域名a.jrg.com通过js操作b.jrg.com将会报错：浏览器阻止访问不同源的iframe
<iframe src="http://b.jrg.com:8080/b.html" frameborder="0" ></iframe>
通过修改document.domain来跨域操纵页面上的iframe，这样就能达到我们的目标，让他们实现跨域交互
document.domain = "jrg.com"
4.Post Message
降域实现跨域通信时要求两个域属于同一个父级域名。而post message没有这个限制。
一个页面向另一个页面发送postmessage消息，如果接收方愿意接收的话(通过message语句监听)，那么就实现了通信。
主页面a.html向ifame页面b.html加入postMessage信息
$('.main input').addEventListener('input', function(){
console.log(this.value);
window.frames[0].postMessage(this.value, '*');
});
$('.main input').value = e.data;
console.log(e.data);
});
iframe页面b.html向父页面a.htm加入postmessage信息
$('#input').addEventListener('input', function(){
window.parent.postMessage(this.value, '*');
});
window.addEventListener('message',function(e) {
$('#input').value = e.data;
console.log(e.data);
});
网友评论