ajax主域和子域之间的跨域问题
Posted 陈陈chenchen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="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="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主域和子域之间的跨域问题的主要内容，如果未能解决你的问题，请参考以下文章