跨域的几种方法

什么是跨域

说到跨域必须先解释什么是同源策略,它是由Netscape提出的一个著名的安全策略。浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。

首先我们来复习下一个完整的url组成

https://www.baidu.com:8080/aaa/1.html?id=10#name
window.location.portocol = https;   //协议
window.location.host = www.baidu.com:8080;   //域名
window.location.hostName = www.baidu.com;   
window.location.port = 8080;  //端口
window.location.search = ?id=10;
window.location.hash = #name;

还不是很熟悉的小伙伴可以参考下什么是域名?什么网站名?什么是URL?,搞懂这个才能理解好同源策略和跨域。
举例:

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

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

实际中我们经常需要到不同的域名下获得数据,由于同源策略的存在我们无法通过AJAX等方式直接获取数据 ,需要一些方法来实现跨域,主要的跨域方式有

  • jsonp
  • CORS (cross-origin-resource-shareing //iE10及以上支持)
  • 降域 (具有局限性,只有是同属于一个域名的二级域名还能够使用这种方式)
  • postMessage

下面就具体介绍下每一种跨域方式

1、jsonp

JSONP 的原理是script标签的src属性不受同源策略影响,网页通过添加一个元素,相当于向服务器发送了一个get请求,服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。
举一个简单的例子
在目录下建立个名称为 1的txt文件,内容为 123,在index.html中使用srcipt标签请求文本文件

文件目录

打开控制台查看请求,在Response中我们成功的拿到1.txt中的数据123。但是,我们虽然拿到了数据但却没有办法使用~!!!这时候有人就想到了用函数调用方式,将服务器传过来的数据以函数参数的方式调用

修改文本中的数据

相当于这种写法

这里就相当于调用了函数fn,实际中调用的这个函数名也事先约定好的,发送请求实际上就是利用DOM操作在文档中添加一个script标签请求数据,注意这个请求的标签在请求完成后要删除

一个完整的JSONP例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>example</title>
    <style media="screen">
      .newsFrame{
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div class="newsFrame">
      <ul class="content">
        <li>上学</li>
        <li>消费</li>
        <li>生活</li>
      </ul>
      <button class="btn">换一批</button>
    </div>


     <script type="text/javascript">
        $('.btn').addEventListener('click',function(){
          var script = document.createElement('script');
          script.src='http://b.har.com:8080/getNews?callback=appendhtml';

          document.head.appendChild(script);
          document.head.removeChild(script);
        })

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

      function $(id){
        return document.querySelector(id)
      }

    </script>
  </body>
</html>

后端

   app.get('/getNews', function(req, res) {
        var news = [
        "看电视",
        '大学在学习',
        '大家在跑步',
        '天气预报',
        '我要吃饭',
        '看电视'
      ]
      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;
      res.send( cb + '(' + JSON.stringify(data) + ')' );
    });

最后,JS中还有其他三个标签可以进行跨域请求img 、iframe、link(stylesheet)但他们都有缺陷

      img  
  //支持跨域但是无法实现获取服务端返回的数据
  <iframe src="https://www.baidu.com"></iframe>
  //支持跨域,可以接收服务端数据,但是过程复杂
  <link rel="stylesheet" type="text/css" href="https://www.baidu.com">
  //会在CSS处理阶段报错

2、CORS

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

node的服务端

   app.get('/getNews', function(req, res) {
        var news = [
        "看电视",
        '大学在学习',
        '大家在跑步',
        '天气预报',
        '我要吃饭',
        '看电视'
      ]
      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");//CORS
      //res.header("Access-Control-Allow-Origin","*");
      res.send( data );
    });

深入学习可以参考阮一峰老师的博客CORS

3、降域

降域主要应用在域名相同的网站之间的跨域。

举个例子

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

根据同源策略上面的两个网址是不是本域,但他们的域名相同,都是jrg.com所以可以通过降域的方式跨域 。具体的实现方法分别在对应的网页的JS中加入

document.domain = "jrg.com";

4、postMessage

postMessage作为html5新引入的API允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。

语法

1、发送

otherWindow.postMessage(message, targetOrigin, [transfer]);

  • otherWindow
    其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames
  • message
    将要发送到其他 window的数据。它将会被[结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。
  • targetOrigin
    通过窗口的origin属性来指定哪些窗口能接收到消息事件,其值可以是字符串""(表示无限制)或者一个URI。在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。这个机制用来控制消息可以发送到哪些窗口;例如,当用postMessage传送密码时,这个参数就显得尤为重要,必须保证它的值与这条包含密码的信息的预期接受者的orign属性完全一致,来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口,那么请始终提供一个有确切值的targetOrigin,而不是。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
  • transfer
    可选是一串和message 同时传递的 Transferable
    对象. 这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。

2、监听
执行如下代码, 其他window可以监听派遣的message:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  // For Chrome, the origin property is in the event.originalEvent
  // object.
  var origin = event.origin || event.originalEvent.origin; 
  if (origin !== "http://example.org:8080")
    return;

  // ...
}

message 的属性有:

  • data
    从其他 window 中传递过来的对象。
  • origin
    调用 postMessage时消息发送方窗口的 origin。这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。
  • source
    对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,529评论 5 475
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,015评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,409评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,385评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,387评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,466评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,880评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,528评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,727评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,528评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,602评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,302评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,873评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,890评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,132评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,777评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,310评论 2 342

推荐阅读更多精彩内容

  • 什么是跨域 浏览器出于安全方面的考虑,只允许客户端与本域(同协议、同域名、同端口,三者缺一不可)下的接口交互。不同...
    七里之境阅读 1,328评论 0 0
  • CORS 实现CORS需要浏览器和服务器的共同协作。对于前端开发者来说,CORS通信与同源的AJAX在代码方面没有...
    饥人谷_有点热阅读 1,270评论 0 2
  • 1. AJAX AJAX(Asynchronous JavaScript and XML),意思就是用JavaSc...
    公子七阅读 4,987评论 0 5
  • 概念:只要协议、域名、端口有任何一个不同,都被当作是不同的域。 所有具有 src 属性的HTML标签都可以跨域 原...
    jeffAAA阅读 2,501评论 0 0
  • 同源策略 浏览器出于安全方面的考虑,为了保证用户信息的安全,防止恶意的网站窃取数据。只允许与本域下的接口交互。不同...
    祝余_scrapy阅读 397评论 0 0