这次给大家带来web开发跨域的使用方法，web开发跨域使用的注意事项有哪些，下面就是实战案例，一起来看一下。
在大家进行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标签都是可以跨域的，包括<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: http://b.a.com/foo var data = {     foo: 'bar',     bar: 'foo' }; callback(data);
然后在我们在主站http://a.com中，可以这样来跨域获取http://b.a.com的数据：
// url: http://a.com/foo var callback = function(data){     // 处理跨域请求得到的数据 }; var script = $('<script>', {src: 'http://b.a.com/bar'}); $('body').append(script);
其实jquery已经封装了jsonp的使用，我们可以这样来
$.getjson( http://b.a.com/bar?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等方法
前面提到的跨域手段都是某种意义上的hack， html5标准中提出的跨域资源共享（cross origin resource share，cors）才是正道。 它支持其他的http方法如put, post等，可以从本质上解决跨域问题。
例如，从http://a.com要访问http://b.com的数据，通常情况下chrome会因跨域请求而报错
xmlhttprequest cannot load http://b.com. no 'access-control-allow-origin' header is present on the requested resource. origin 'http://a.com' is therefore not allowed access
错误原因是被请求资源没有设置access-control-allow-origin，所以我们在b.com的服务器中设置这个响应头字段即可
access-control-allow-origin: *              # 允许所有域名访问，或者 access-control-allow-origin: http://a.com   # 只允许所有域名访问
六、window.postmessage
原理：html5允许窗口之间发送消息
限制：浏览器需要支持html5，获取窗口句柄后才能相互通信
这是一个安全的跨域通信方法，postmessage(message,targetorigin)也是html5引入的特性。 可以给任何一个window发送消息，不论是否同源。第二个参数可以是*但如果你设置了一个url但不相符，那么该事件不会被分发。看一个普通的使用方式吧
// url: http://a.com/foo var win = window.open('http://b.com/bar'); win.postmessage('hello, bar!', 'http://b.com');
// url: http://b.com/bar window.addeventlistener('message',function(event) {     console.log(event.data); });
七、访问控制安全的讨论
在html5之前，jsonp已经成为跨域的事实标准了，jquery都给出了支持。 值得注意的是它只是hack，并没有产生额外的安全问题。 因为jsonp要成功获取数据，需要跨域资源所在服务器的配合，比如资源所在服务器需要自愿地回调一个合适的函数，所以服务器仍然有能力控制资源的跨域访问
跨域的正道还是要使用html5提供的cors头字段以及window.postmessage， 可以支持post, put等http方法，从机制上解决跨域问题。 值得注意的是access-control-allow-origin头字段是资源所在服务器设置的， 访问控制的责任仍然是在提供资源的服务器一方，这和jsonp是一样的
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
以上就是web开发跨域的使用方法的详细内容。