跨域的实现方式

什么是跨域

只要协议、域名、端口有任何一个不同，都被当作是不同的域，对于端口和协议的不同只能通过后端来解决。浏览器一般情况下一个页面不能访问另外一个页面的脚本信息。

跨域的实现方法

跨域的实现方法有如下几种

JSONP

JSONP是JSON padding的简写，是应用JSON的一种新方法，在web服务中非常流行，JSONP看起来和JSON差不多，只不过是被包含在函数中的JSON。类似下面这样

callback({"name": "Nicolas" })

JSON由两部分组成：回调函数和数据，回调函数是当页面响应的时候页面调用的数据。回调函数的名字一般在请求中指定的。而数据就是传入回调函数的JSON数据。比如
http://jrg.com/index.html?callback=handler
这里指定的回调函数名字就是handler()。
JSONP是通过动态 //后端 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); } })

CORS(cross-origin-resource-sharing)

CORS是cross-origin-resrouce-sharing的缩写，定义了在必须访问跨域资源时，浏览器与服务器之间如何沟通，CORS后面的思想是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求是成功还是失败。
比如一个简单的使用GET和POST发送的请求，它没有自定义头部，主体内容是text/plain。在发送请求的时候，必须给它附加一个额外的origin头部，其中包含请求页面的信息，以便服务器根据这个头部来决定是否给予响应。下面是origin头部的一个示例。

origin: http://www.jirengu.com

如果服务器认为这个请求可以接收，就在access-control-allow-origin头部中回发相同的源信息(如果是公共资源，可以回发"*")。例如

Access-Control-Allow-Origin:http://www.jirengu.com

如果没有这个头部，或者有这个头部但是源信息不匹配，浏览器就会驳回请求。正常情况下，浏览器会处理这个请求。请求和响应都不包含cookie信息。
具体例子如下

//前端






  

    
第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(news[index], 1);
    }
    res.header("Access-Control-Allow-Origin", "*");
    res.send(data);
});

降域

//a部分




  
使用降域实现跨域
  

    
  

  






//b部分