欢迎访问大高互联网络公司!实力接全国网站SEO优化快速上首页,精准锁定流量源,无排名不收费,快速建网站、开发|营销推广,SEO建站一站式服务!
资讯发布

您所在的位置: SEO快排 > 浙江 > 杭州 > 正文

web开发教程之跨域的解决方案详解

日期:2020-05-22 03:55:50 作者:大高SEO 杭州

概念如下:只要协议、域名、端口有任何一个不同,都被当作是不同的域

下面是具体的跨域情况详解

URL 说明 是否允许通信
  同一域名下   允许  
  同一域名下不同文件夹   允许  
:8000/a.js、   同一域名,不同端口   不允许  
、https://www.a.com/b.js   同一域名,不同协议   不允许  
  域名和域名对应ip   不允许  
  主域相同,子域不同   不允许(cookie这种情况下也不允许访问)  
  同一域名,不同二级域名(同上)   不允许(cookie这种情况下也不允许访问)  
  不同域名   不允许  

一、document.domain跨域

原理:相同主域名不同子域名下的页面,可以设置document.domain让它们同域

限制:同域document提供的是页面间的互操作,需要载入iframe页面

下面几个域名下的页面都是可以通过document.domain跨域互操作的: , , 。 但只能以页面嵌套的方式来进行页面互操作,比如常见的iframe方式就可以完成页面嵌套

// URL var ifr = document.createElement('iframe'); ifr.src = 'http://b.a.com/bar'; ifr.onload = function(){ var ifrdoc = ifr.contentDocument || ifr.contentWindow.document; ifrdoc.getElementsById("foo").innerHTML); }; ifr.style.display = 'none'; document.body.appendChild(ifr);

上述代码所在的URL是,它对的DOM访问要求后者将 document.domain往上设置一级

// URL document.domain = 'a.com'

document.domain只能从子域设置到主域,往下设置以及往其他域名设置都是不允许的, 在Chrome中给出的错误是这样的

Uncaught DOMException: Failed to set the 'domain' property on 'Document': 'baidu.com' is not a suffix of 'b.a.com'

二、有src的标签

原理:所有具有src属性的HTML标签都是可以跨域的,包括<img>, <script>

限制:需要创建一个DOM对象,只能用于GET方法

在document.body中append一个具有src属性的HTML标签, src属性值指向的URL会以GET方法被访问,该访问是可以跨域的

其实样式表的<link>标签也是可以跨域的,只要是有src或href的HTML标签都有跨域的能力

不同的HTML标签发送HTTP请求的时机不同,例如<img>在更改src属性时就会发送请求,而script, iframe, link[rel=stylesheet]只有在添加到DOM树之后才会发送HTTP请求:

var img = new Image(); img.src = 'http://some/picture'; // 发送HTTP请求 var ifr = $('<iframe>', {src: 'http://b.a.com/bar'}); $('body').append(ifr); // 发送HTTP请求

三、JSONP

原理:<script>是可以跨域的,而且在跨域脚本中可以直接回调当前脚本的函数

限制:需要创建一个DOM对象并且添加到DOM树,只能用于GET方法

JSONP利用的是<script>可以跨域的特性,跨域URL返回的脚本不仅包含数据,还包含一个回调

// URL: var data = { foo: 'bar', bar: 'foo' }; callback(data);

然后在我们在主站中,可以这样来跨域获取的数据:

// URL: var callback = function(data){ // 处理跨域请求得到的数据 }; var script = $('<script>', {src: 'http://b.a.com/bar'}); $('body').append(script);

其实jQuery已经封装了JSONP的使用,我们可以这样来

$.getJSON( "?callback=callback", function( data ){ // 处理跨域请求得到的数据 });

$.getJSON与$.get的区别是前者会把responseText转换为JSON,而且当URL具有callback参数时, jQuery将会把它解释为一个JSONP请求,创建一个<script>标签来完成该请求

四、navigation 对象

原理:iframe之间是共享navigator对象的,用它来传递信息

要求:IE6/7

有些人注意到了IE6/7的一个漏洞:iframe之间的window.navigator对象是共享的。 我们可以把它作为一个Messenger,通过它来传递信息。比如一个简单的委托:

// a.com navigation.onData(){ // 数据到达的处理函数 } typeof navigation.getData === 'function' || navigation.getData()

// b.com navigation.getData = function(){ $.get('/path/under/b.com') .success(function(data){ typeof navigation.onData === 'function' || navigation.onData(data) }); }

与document.navigator类似,window.name也是当前窗口所有页面所共享的。也可以用它来传递信息。 同样蛋疼的办法还有传递Hash(有些人叫锚点),这是因为每次浏览器打开一个URL时,URL后面的#xxx部分会保留下来,那么新的页面可以从这里获得上一个页面的数据

五、跨域资源共享(CORS)

原理:服务器设置Access-Control-Allow-OriginHTTP响应头之后,浏览器将会允许跨域请求

限制:浏览器需要支持HTML5,可以支持POST,PUT等方法

更多相关推荐

【本文标题和网址】web开发教程之跨域的解决方案详解:http://yl6969.com/zhejiang/hangzhou/10461.html

资讯排行
搜索热点