跨域的几种例子

JSONP:

前端代码:

  $('.change').addEventListener('click', function(){
    var script = document.createElement('script');
    script.src = 'http://jrg.com/getNews?callback=addSomeNwes';
    document.head.appendChild(script);
    document.head.removeChild(script);
  })
  function addSomeNwes(news){
      ……
  }
  function $(id){
    return document.querySelector(id);
  }

后台node.js代码:

app.get('/getNews', function(req, res){
  var news = [
    "高考加油",
    "欢乐颂",
    "苹果或将微信下架",
    "厉害了小姐姐",
    "11岁少女酷似刘诗诗",
    "楚乔转",
    "欢乐颂2",
    "高考作文",
    "北电侯良平",
    "这一刻的时光"
  ]
  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 cback = req.query.callback;
  if(cback){
    res.send(cback + '('+ JSON.stringify(data) + ')');
  }else{
    res.send(data);//如果没有callback就直接返回数据
  }
})

CORS方法:

前端代码与AJAX并无不同,只是在后端需要添加:

res.header("Access-Control-Allow-Origin", "发送请求的域名"); 
//若为*,则代表任何人发送请求过来,我都将同意返回数据给他
res.header("Access-Control-Allow-Origin", "*"); 
app.get('/getNews', function(req, res){
    var news = [
    "高考加油",
    "欢乐颂",
    "苹果或将微信下架",
    "厉害了小姐姐",
    "楚乔转",
    "欢乐颂2",
    "高考作文",
    "北电侯良平",
    "这一刻的时光"
    ]
    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);
})

降域

//URL: http://a.jrg.com:8080/a.html

document.domain='jrg.com';
//URL: http://b.jrg.com:8080/b.html

document.domain='jrg.com';
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是跨域? 2.) 资源嵌入:、、、等dom标签,还有样式中background:url()、@font-fac...
    电影里的梦i阅读 2,393评论 0 5
  • 跨域以及跨域的几种方式 讲解跨域之前我们先来看看什么是同源策略 什么是同源策略 通常来说,浏览器出于安全方面的考虑...
    尾巴尾巴尾巴阅读 1,628评论 0 1
  • 今天有课,可是儿子生病没好 看着外边晴朗的天空干着急 很无奈 上午把少爷的午饭准备好 去清真寺旁的草地练了一套 家...
    了了妈2017阅读 207评论 1 5
  • Kendoui中的Grid组件是一个强大的报表生成组件,可以通过读取dataSource._data来快速生成一个...
    查无此人_chazz阅读 8,001评论 28 5
  • XSS攻击 XSS攻击,跨站脚本攻击,这是在网站中最容易产生的攻击。原理是攻击者向存在XSS漏洞的网站输入一段攻击...
    骑着蜗牛去遛狗阅读 326评论 0 0