首页 > 代码库 > ajax主域和子域之间的跨域问题

ajax主域和子域之间的跨域问题

在某些应用场景下,需要在主域中,调用子域中的某个接口,如果直接在主域中向子域发ajax请求,会报跨域错误,可以用iframe来解决这种跨域问题。
假如主域为www.baidu.com,子域为baike.baidu.com。主域中的A页面需要通过ajax请求调用子域中的某项服务。首先需要在子域中准备一个B页面,B页面就是一个简单的空页面,最好把jquery引到B页面中,这样可以直接用jquery发ajax请求;在主域的A页面中要用iframe把B页面url地址引过来。

B页面格式

 1 //B.html
 2 <html>
 3 <head>
 4     <title>B页面</title>
 5     <script type="text/javascript" src="http://www.mamicode.com/jquery.js"></script>
 6 </head>
 7 <body>
 8     <div>B页面</div>
 9     <script>        
10         $(function(){
11             try{
12             document.domain = "www.baidu.com";
13             }catch(e){}
14         });
15     </script>
16 </body>
17 </html>

A页面格式

 1 //A.html
 2 <html>
 3 <head>
 4     <title>A页面</title>
 5     <script type="text/javascript" src="http://www.mamicode.com/jquery.js"></script>
 6 </head>
 7 <body>
 8     <div>A页面</div>
 9     <iframe id="iframe" src="http://baike.baidu.com/B.html" style="display:none;"></iframe>
10     <script>
11         $(function(){
12             try{
13                 document.domain = "www.baidu.com";
14             }catch(e){}
15             $("#iframe").load(function(){
16                 var iframe = $("#iframe").contentDocument.$;
17                 ifram.get("http://baike.baidu.com/接口",function(data){});
18             });
19         });
20     </script>
21 <body>
22 </html>

有一点需要注意,就是在A页面中,要等iframe标签完成加载B页面之后,再取iframe对象的contentDocument,否则如果B页面没有被iframe完全加载,在A页面中通过contentDocument属性就取不到B页面中的jQuery对象。一旦取到B页面中的jQuery对象,就可以直接发ajax请求了,这种类似“代理”方式可以解决主子域的跨域问题。

ajax主域和子域之间的跨域问题