跨域的解决方式

1.JSONP
jsonp是json with padding(填充式json或参数式json)的简写。html中script标签可以引入其他域下的js,比如引入线上的jquery库。利用这个特性,可实现跨域访问接口,需要后端支持。其中src的链接会被当成js执行。

定义数据处理函数_fun
创建script标签,src的地址执行后端接口,最后加个参数callback=_fun
服务端在收到请求后,解析参数,计算返回数据,输出fun(data)字符串。
fun(data)会放到script标签作为js执行。此时会调用fun函数,将data作为参数,所以我们无需再执行fun()函数,因为再script标签中会执行






news





  • 第11日前瞻:中国冲击4金 博尔特再战

  • 男双力争会师决赛

  • 女排将死磕巴西!






app.get('/getNews', function(req, res){

var news = [
    "第11日前瞻:中国冲击4金 博尔特再战200米羽球",
    "正直播柴飚/洪炜出战 男双力争会师决赛",
    "女排将死磕巴西!郎平安排男陪练模仿对方核心",
    "没有中国选手和巨星的110米栏 我们还看吗?",
    "中英上演奥运金牌大战",
    "博彩赔率挺中国夺回第二纽约时报:中国因对手服禁药而丢失的奖牌最多",
    "最“出柜”奥运?同性之爱闪耀里约",
    "下跪拜谢与洪荒之力一样 都是真情流露"
]
var data = [];
for(var i=0; i<3; i++){
    var index = parseInt(Math.random()*news.length);
    data.push(news[index]);
    news.splice(index, 1);
}
var cb = req.query.callback;
if(cb){
    res.send(cb + '('+ JSON.stringify(data) + ')');
}else{
    res.send(data);
}
//appendHtml(['1xxx','2xxx'])

})

2.cors




app.get('/getNews', function(req, res){
var news = [
"第11日前瞻:中国冲击4金 博尔特再战200米羽球",
"正直播柴飚/洪炜出战 男双力争会师决赛",
"女排将死磕巴西!郎平安排男陪练模仿对方核心",
"没有中国选手和巨星的110米栏 我们还看吗?",
"中英上演奥运金牌大战",
"博彩赔率挺中国夺回第二纽约时报:中国因对手服禁药而丢失的奖牌最多",
"最“出柜”奥运?同性之爱闪耀里约",
"下跪拜谢与洪荒之力一样 都是真情流露"
]
var data = [];
for(var i=0; i<3; i++){
var index = parseInt(Math.random()news.length);
data.push(news[index]);
news.splice(index, 1);
}
//服务端接受此网站的跨域请求。
res.header('Access-Control-Allow-Origin','http://a.jrg.com:8080');
//res.header('Access-Control-Allow-Origin','
');
res.send(data);
})

3.降域

降域是相对于iframe元素而言的 。
一般来说域名为http:// b.jrg.com/b的网页以iframe的形式嵌在域名为http:// a.jrg.com/a的网页中,浏览器发现该请求不符合同源策略,正常情况下不能进行跨域访问,但是当我们在两个页面中分别设置documet.domain = jrg.com的时候(注意观察这个方法有一个限制就是 域名中必须有相同的部分),B页面就可以访问到A页面中的资源了,比如下面的代码:







使用降域实现跨域















4.PostMessage
window.postMessage()是HTML5的新方法,可以使用它来向其它的window对象发送数据,无论这个window对象是属于同源或不同源,IE8+支持。
otherWindow.postMessage(message, targetOrigin);

otherWindow
其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
message
要传递的数据。html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化.
通过窗口的origin属性来指定哪些窗口能接收到消息事件,其值可以是字符串""(表示无限制)或者一个URI。在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。这个机制用来控制消息可以发送到哪些窗口;例如,当用postMessage传送密码时,这个参数就显得尤为重要,必须保证它的值与这条包含密码的信息的预期接受者的orign属性完全一致,来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口,那么请始终提供一个有确切值的targetOrigin,而不是。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。

你可能感兴趣的:(跨域的解决方式)