跨域的几种方式

跨域以及跨域的几种方式

讲解跨域之前我们先来看看什么是同源策略

什么是同源策略

通常来说，浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不许读写对方的资源，
本域指的是
－同协议：比如都是http或者https
－同域名：比如都是http://baidu.com/a和http://baidu.com/b
－同端口：比如都是80端口

同源:

http://baidu.com/a/b.js 和http://baidu.com/index.php

不同源:

http://baidu.com/main.js 和https://baidu.com/a.php (协议不同)
http://baidu.com/main.js和 http://bbs.baidu.com/a.php(域名不同，域名必须完全相同才可以)
http://baidu.com/main.js 和 http://baidu.com:8080/a.php(端口不同,第一个是80)

***需要注意的是: 对于当前页面来说页面存放 JS 文件的域不重要，重要的是加载该该JS的页面所在什么域 **

什么是跨域？跨域有几种实现形式

跨域就是实现不同域的接口可以进行数据交互

  • JSONP----JSONP 的原理是什么
    html中script标签可以引入其他域下的js，比如引入线上的jquery库。利用这个特性，可实现跨域访问接口。不过需要后端支持。
    web页面中，通过script标签获取js代码可以进行跨域，我们可以动态的创建script标签，设置src属性指向我们请求资源的url地址，然后放到head标签中。这样就可以把不同域的数据加载到本域名下，不过需要后端支持jsonp，也就是通过前端的url中的callback参数动态的生成回调函数名，通过传参的形式执行获取到的数据，这样的话，前端预定义好的函数就可以让传来的数据自动运行。

  • CORS

    CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。CORS兼容IE10+ 。

  • 降域

    降域是相对于iframe元素而言的 。

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

  • postMessage()

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

postMessage(data, origin)方法接收两个参数

  1. data:要传递的数据。html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
  2. origin:字符串参数，用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * ，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"

跨域方式的演示

介绍跨域方式之前，我们先来修改本机的hosts文件如下:

127.0.0.1       localhost
127.0.0.1       test.com
127.0.0.1       a.test.com
127.0.0.1       b.test.com

这样本地地址就对应了不同的域

JSONP

JSONP的跨域方式是利用<script>标签的src属性可以跨域引用资源的特点，有这些属性的标签还有<img>、<iframe>，但是JSONP只支持GET方式。

下面我们以点击获取随机新闻列表的例子来演示一下JSONP的具体工作原理(test.com访问a.test.com)

HTML如下:

<div class="container">
  <ul class="news">
    <li>第11日前瞻：中国冲击4金 博尔特再战</li>
    <li>男双力争会师决赛 </li>
    <li>女排将死磕巴西！</li>
  </ul>
  <button class="change">换一组</button>
</div>

首先，我们在前端要在调用资源的时候动态创建script标签，并设置src属性指向资源的URL地址，代码如下:

document.querySelector('.change').addEventListener('click', function() {
  var script = document.createElement('script')
  script.setAttribute('src', '//a.test.com:8080/getNews?callback=appendHtml')   //callback=appendHtml是给后端资源打包数据用的参数，同时也是前端定义的回调函数
  document.head.appendChild(script)
  document.head.removeChild(script) //删除script标签是因为script标签插入页面的时候资源已经请求到了
})

定义获取资源后需要执行的回调函数:

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

后端是把前端发送的URL地址拿到的数据以前端定义的回调函数（appendHtml）的参数的形式返回给前端，这样到了前端就可以调用执行了:

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

  data.push(news[index]);
}
var callback = req.query.callback;   //查询前端有没有传入回调函数
if (callback) {
    res.send(callback + '(' + JSON.stringify(data) + ')');    //数据以函数参数的方式传给前端
} else {
    res.send(data);
}

这样我们就从test.com访问到了a.test.com下的资源

CORS

CORS是AJAX跨域请求的一种方式，目前只支持IE10以上浏览器，具体兼容如下图

同样以上面的列子来演示

首先JS部分，发起AJAX请求（与同域相同）:

document.querySelector('.change').addEventListener('click', function () {
  var xhr = new XMLHttpRequest();
  xhr.open('get', '//a.test.com:8080/getNews', true);
  xhr.send();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      appendHtml(JSON.parse(xhr.responseText))
    }
  }
  window.xhr = xhr
})
function appendHtml(news) {
  var html = ''
  for (var i = 0; i < news.length; i++) {
    html += '<li>' + news[i] + '</li>'
  }
  document.querySelector('.news').innerHTML = html
}

后端在向前端发送资源之前，设置请求头 "Access-Control-Allow-Origin":

var news = [
    "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
    "正直播柴飚/洪炜出战 男双力争会师决赛",
    "女排将死磕巴西！郎平安排男陪练模仿对方核心",
    "没有中国选手和巨星的110米栏 我们还看吗？",
    "中英上演奥运金牌大战",
    "博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
    "最“出柜”奥运？同性之爱闪耀里约",
    "下跪拜谢与洪荒之力一样 都是真情流露"
  ]
  var data = [];
  for (var i = 0; i < 3; i++) {
    var index = Math.floor(Math.random() * news.length);
    data.push(news[index]);
  }
  res.header("Access-Control-Allow-Origin", "//test.com:8080"); // //test.com:8080表示只有//test.com:8080下发起请求才可以调用本域下的资源
  //res.header("Access-Control-Allow-Origin", "*");   //*表示任何域下发起请求都可以调用本域下的资源
  res.send(data);

降域

降域是相对于iframe元素而言的 。

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

B页面:

<html>
<style>
    html,
    body {
        margin: 0;
    }

    input {
        margin: 20px;
        width: 200px;
    }
</style>

<input id="input" type="text" placeholder="http://b.test.com/b.html">
<script>
    // URL: http://b.test.com/b.html

    document.querySelector('#input').addEventListener('input', function () {
        window.parent.document.querySelector('input').value = this.value;
    })

    document.domain = 'test.com';

</script>

</html>

A页面:

<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.test.com:8080/a.html">
    </div>

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

<script>
    //URL: http://a.test.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 = "test.com"

</script>

</html>

通过a.test.com/a.html访问b.test.com/b.html，实现了跨域访问，效果如下:

postMessage()

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

postMessage(data, origin)方法接收两个参数

  1. data:要传递的数据。html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
  2. origin:字符串参数，用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * ，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"

同样以上面将域的例子来说明postMessage()的原理（A页面中嵌套了一个B页面）

那么我们可以在A页面中通过postMessage()方法向跨域的B页面传递数据

<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.test.com:8080/a.html">
    </div>

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

<script>

    document.querySelector('.main input').addEventListener('input', function () {
        window.frames[0].postMessage(this.value, '*')
    })

    window.addEventListener('message', function (e) {
         document.querySelector('input').value = e.data
    })
</script>

</html>

那么，我们怎么在B页面上接收A页面传递过来的数据呢，我们只要在B页面监听window的message事件就可以，消息内容储存在该事件对象的data属性中。

<html>
<input id="input" type="text" placeholder="http://b.test.com/b.html">
<script>
    
    document.querySelector('input').addEventListener('input', function () {
        window.parent.postMessage(this.value, '*')
    })

    window.addEventListener('message', function (e) {
         document.querySelector('input').value = e.data
    })

</script>
</html>

同样，如果想要在B页面发送数据，A页面接受数据，只要在B页面使用postMessage()方法，然后在A页面监听window的message事件即可。

最终页面得到的效果如下:

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,968评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,601评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,220评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,416评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,425评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,144评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,432评论 3赞 401
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,088评论 0赞 261
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,586评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,783评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,343评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2赞 345

推荐阅读更多精彩内容