演示三种跨域的解决方式

JSONP

// 前端程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>news</title>
<style>
  .container{
    width: 900px;
    margin: 0 auto;
  }
</style>
</head>
<body>
  <div class="container">
    <ul class="news">
      <li>第11日前瞻：中国冲击4金 博尔特再战</li>
      <li>男双力争会师决赛 </li> 
      <li>女排将死磕巴西！</li>
    </ul>
    <button class="change">换一组</button>
  </div>
  
<script>
  
  $('.change').addEventListener('click', function(){
    var script = document.createElement('script');
    // 第1步：创建一个 script 标签
    script.src = 'http://127.0.0.1/getNews?callback=appendHtml';
    // 第2步：将 script 的 src 属性改为目标域的地址 url，并在 url 中带好参数，方便后端直接将返回数据定义成要执行的 js 函数的形式
    document.head.appendChild(script);
    // 第3步：将创建并修改好的 script 标签加到页面 DOM 中
    document.head.removeChild(script);
    // 第4步：script 标签使用完毕，可以从文档中移除
  })

  function appendHtml(news){
    var html = '';
    for( var i=0; i<news.length; i++){
      html += '<li>' + news[i] + '</li>';
    }
    console.log(html);
    $('.news').innerHTML = html;
  }


  function $(id){
    return document.querySelector(id);
  }
</script>
</html>

// 后端程序，使用 server-mock 启动

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);
    }
    // 根据 url 参数，返回数据形式直接是 function() 的形式，在页面中直接就是要执行的 JS 函数代码
})

核心是

  $('.change').addEventListener('click', function(){
    var script = document.createElement('script');
    // 第1步：创建一个 script 标签
    script.src = 'http://127.0.0.1/getNews?callback=appendHtml';
    // 第2步：将 script 的 src 属性改为目标域的地址 url，并在 url 中带好参数，方便后端直接将返回数据定义成要执行的 js 函数的形式
    document.head.appendChild(script);
    // 第3步：将创建并修改好的 script 标签加到页面 DOM 中
    document.head.removeChild(script);
    // 第4步：script 标签使用完毕，可以从文档中移除
  })

    var cb = req.query.callback;
    if(cb){
        res.send(cb + '('+ JSON.stringify(data) + ')');
    }else{
        res.send(data);
    }
    // 根据 url 参数，返回数据形式直接是 function() 的形式，在页面中直接就是要执行的 JS 函数代码

CORS

// 前端程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>news</title>
<style>
  .container{
    width: 900px;
    margin: 0 auto;
  }
</style>
</head>
<body>
  <div class="container">
    <ul class="news">
      <li>第11日前瞻：中国冲击4金 博尔特再战</li>
      <li>男双力争会师决赛 </li> 
      <li>女排将死磕巴西！</li>
    </ul>
    <button class="change">换一组</button>
  </div>
  
<script>
  $('.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) )
      }
    }
  })

  function appendHtml(news){
    var html = '';
    for( var i=0; i<news.length; i++){
      html += '<li>' + news[i] + '</li>';
    }
    console.log(html);
    $('.news').innerHTML = html;
  }


  function $(id){
    return document.querySelector(id);
  }
</script>
</html>

// 后端程序
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);
   }
 
   // CORS 方法的关键在后端这里，后端这里对于允许跨域访问自身 JS 接口的地址专门设置了返回响应的头部，如下述这两行所示
   res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080"); 
   //res.header("Access-Control-Allow-Origin", "*"); 
   // 第一行允许专门的地址跨域访问自身，第二行允许所有地址跨域访问自身
 
   res.send(data);
})

核心是

    // CORS 方法的关键在后端这里，后端这里对于允许跨域访问自身 JS 接口的地址专门设置了返回响应的头部，如下述这两行所示
    res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080"); 
    //res.header("Access-Control-Allow-Origin", "*"); 
    // 第一行允许专门的地址跨域访问自身，第二行允许所有地址跨域访问自身

降域

<html>
<style>
  .ct{width: 910px;margin: auto;}
  .main{
    float: left;
    width: 450px;
    height: 300px;
    border: 1px solid #ccc;
  }
  .main input{
    margin: 20px;
    width: 200px;
  }
  .iframe{
    float: right;
  }

  iframe{
    width: 450px;
    height: 300px;
    border: 1px dashed #ccc;
  }
</style>

<div class="ct">
  <h1>使用降域实现跨域</h1>
  <div class="main">
    <input type="text" placeholder="http://a.jrg.com:8080/a.html">
  </div>

  <iframe src="http://b.jrg.com:8080/b.html" frameborder="0" ></iframe>
</div>

<script>
//URL: http://a.jrg.com:8080/a.html

document.querySelector('.main input').addEventListener('input', function(){
  console.log(this.value);
  window.frames[0].document.querySelector('input').value = this.value;
})

document.domain = "jrg.com"
</script>
</html>

<html>
<style>
    html,body{
        margin: 0;
    }
    input{
        margin: 20px;
        width: 200px;
    }
</style>

  <input id="input" type="text"  placeholder="http://b.jrg.com:8080/b.html">

<script>
// URL: http://b.jrg.com:8080/b.html
 
document.querySelector('#input').addEventListener('input', function() {
    window.parent.document.querySelector('input').value = this.value;
})

document.domain = 'jrg.com';
</script>
</html>

浏览器中不同域的框架也是不能通过js进行交互的，但是不同框架之间可以获取到window对象，但却无法获取到相应的属性和方法。

例如 a.baidu.com 域下的一个 html 文档里有一个在其他域下（b.baidu.com）的 iframe 框架，在a.baidu.com 中并不能访问到 b.baidu.com 里的数据；

但可以获取到 b.baidu.com 中的 window 对象，但是这时 window 的属性和方法并不可用，两个文件中使用 document.domain('baidu.com')方法 把域名都降到baidu.com；

这样就可以在 a.baidu.com 中使用 iframe 里面的 window 的所有属性和方法了，通过window.frames[0] 获取到 iframe 框架，但是这时再通过window.frames[0].document.querySelector(element) 获取到 iframe 里的 element 元素。

在b.baidu.com 中通过window.parent.document.querySelector(element) 获取到html里的元素。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • 跨域
    浏览器同源策略 浏览器出于安全考虑，默认情况下，只允许在本域接口下进行数据交互。这是浏览器的一种安全保护机制。主要...
    sutingy阅读 2,890评论 0赞 0
  • 跨域问题
    1. 什么是跨域？ 跨域一词从字面意思看，就是跨域名嘛，但实际上跨域的范围绝对不止那么狭隘。具体概念如下：只要协议...
    他在发呆阅读 4,210评论 0赞 0
  • 跨域
    1. 什么是跨域？ 跨域一词从字面意思看，就是跨域名嘛，但实际上跨域的范围绝对不止那么狭隘。具体概念如下：只要协议...
    w_zhuan阅读 3,590评论 0赞 0
  • 跨域解决方方法的整理
    跨域问题产生的原理是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js...
    往复随安_cc75阅读 3,477评论 0赞 1
  • 浏览器中使用js跨域获取数据的几种方式
    来吧，少年，今天还能看文章学习的，一多半都是单身贵族，看朋友圈还会被虐，不如学习，上街还会被虐，不如学习，痛并快乐...
    范小饭_阅读 12,431评论 3赞 24

友情链接更多精彩内容