美文网首页
跨域的几种例子

跨域的几种例子

作者: 赫鲁晓夫的玉米棒子 | 来源:发表于2017-06-17 16:38 被阅读0次

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';

相关文章

  • 跨域的几种例子

    JSONP: 前端代码: 后台node.js代码: CORS方法: 前端代码与AJAX并无不同,只是在后端需要添加...

  • 跨域问题详解分析

    参考文档 CORS详解 跨域资源共享 CORS 详解 js中几种实用的跨域方法原理详解 跨域的那些事儿 跨域与跨域...

  • web跨域解决方案

    围绕以下几点介绍: 什么是跨域? 常用的几种跨域处理方法? crossdomain.xml解决跨域问题 什么是跨域...

  • 跨域问题:好几种解决方案

    跨域分为广义跨域和狭义跨域 广义跨域:一个域下的文档或脚本试图去请求另一个域下的资源; 广义跨域可以分为以下几种:...

  • Ajax 请求和跨域

    跨域的几种方式: cors方式 cross-orign-resource-shareing(跨域)参考:http:...

  • #hello,JS:15 同源策略 & 跨域(JSONP)

    跨域有几种常见的方式?你有没有跨域使用的经验? 方式: 使用jsonp实现跨域?使用cors实现跨域?浏览器另类的...

  • 跨域问题

    前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。 一、什么是跨域? 广义...

  • JavaScript 九种跨域方式实现原理

    前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。 一、什么是跨域?...

  • JavaScript 九种跨域方式实现原理

    前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。 一、什么是跨域?...

  • JavaScript 九种跨域方式实现原理【转】

    前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。 一、什么是跨域?...

网友评论

      本文标题:跨域的几种例子

      本文链接:https://www.haomeiwen.com/subject/rsqbqxtx.html