跨域的几种实现方法

作者: 饥人谷_檐语 | 来源:发表于2019-04-26 22:24 被阅读0次

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

一、jsonp

html中script标签可以引入其他域下的js，比如引入线上的jquery库。利用这个特性，可实现跨域访问接口，不过需要后端支持。

web页面中，通过script标签获取js代码可以进行跨域，我们可以动态的创建script标签，设置src属性指向我们请求资源的url地址，然后放到head标签中。这样就可以把不同域的数据加载到本域名下，不过需要后端支持jsonp，也就是通过前端的url中的callback参数动态的生成回调函数名，通过传参的形式执行获取到的数据，这样的话，前端预定义好的函数就可以让传来的数据自动运行。

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

同样以上面的列子来演示。首先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.baidu.com/b (A)的网页以iframe的形式嵌在域名为http://a.baidu.com/a (B)的网页中，正常情况下，该请求不符合浏览器的同源策略，不能进行跨域访问。但是当我们在两个页面中分别设置documet.domain = baidu.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的新方法，IE8+支持。可以使用它来向其它的window对象发送数据，无论这个window对象是属于同源或不同源。

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

data:要传递的数据。html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
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事件即可。

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

参考

跨域的几种实现方法

一、jsonp

二、cors

三、降域

四、postMessage

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读