这篇文章主要为大家展示了“web中如何解决跨域的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“web中如何解决跨域的问题”这篇文章吧。
为高邑等地区用户提供了全套网页设计制作服务,及高邑网站建设行业解决方案。主营业务为成都网站设计、成都网站制作、高邑网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
什么是跨域?
概念如下:只要协议、域名、端口有任何一个不同,都被当作是不同的域
下面是具体的跨域情况详解
URL | 说明 | 是否允许通信 |
---|---|---|
http://www.a.com/a.js、http://www.a.com/b.js | 同一域名下 | 允许 |
http://www.a.com/lab/a.js、http://www.a.com/script/b.js | 同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js、http://www.a.com/b.js | 同一域名,不同端口 | 不允许 |
http://www.a.com/a.js、https://www.a.com/b.js | 同一域名,不同协议 | 不允许 |
http://www.a.com/a.js、http://70.32.92.74/b.js | 域名和域名对应ip | 不允许 |
http://www.a.com/a.js、http://script.a.com/b.js | 主域相同,子域不同 | 不允许(cookie这种情况下也不允许访问) |
http://www.a.com/a.js、http://a.com/b.js | 同一域名,不同二级域名(同上) | 不允许(cookie这种情况下也不允许访问) |
http://www.cnblogs.com/a.js、http://www.a.com/b.js | 不同域名 | 不允许 |
一、document.domain跨域
原理:相同主域名不同子域名下的页面,可以设置document.domain
让它们同域
限制:同域document提供的是页面间的互操作,需要载入iframe页面
下面几个域名下的页面都是可以通过document.domain跨域互操作的: http://a.com/foo, http://b.a.com/bar, http://c.a.com/bar。 但只能以页面嵌套的方式来进行页面互操作,比如常见的iframe方式就可以完成页面嵌套
// URL http://a.com/foo 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是http://a.com/foo,它对http://b.a.com/bar的DOM访问要求后者将 document.domain往上设置一级
// URL http://b.a.com/bar 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标签都是可以跨域的,包括,
限制:需要创建一个DOM对象,只能用于GET方法
在document.body
中append一个具有src属性的HTML标签, src属性值指向的URL会以GET方法被访问,该访问是可以跨域的
其实样式表的标签也是可以跨域的,只要是有src或href的HTML标签都有跨域的能力
不同的HTML标签发送HTTP请求的时机不同,例如在更改src属性时就会发送请求,而script, iframe, link[rel=stylesheet]
只有在添加到DOM树之后才会发送HTTP请求:
var img = new Image(); img.src = 'http://some/picture'; // 发送HTTP请求 var ifr = $('
三、JSONP
原理: