Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cross-subdomain Requests (GET, POST, ...) with Jquery and IFrame

I'm trying to develop requests between my main domain (http://foo.com) ans my API (http://api.foo.com).

To bypass the restrictions about cross-subdomain stuff, I use an Iframe, on my main page (http.//foo.com/main.html), pointing on a page iframe.html there : scripts.api.foo.com.

(scripts.api.foo.com and foo.com are on the same server, api.foo.com on anothers)

>iframe.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
       <head>
           <title>Iframe</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
           <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
       </head>
       <body>
        <script type="text/javascript">
    document.domain = 'foo.com';
    function testIframe()
    {
        $.ajax({
                    url: "http://api.foo.com/utctime",
                    timeout: 7000,
                    complete: function(jqXHR, textStatus){
                        parent.alert(jqXHR.status);}
                });
    }
        </script>
       </body>
    </html>

>main.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
       <title>Test</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   </head>
   <body>
    <script type="text/javascript">
document.domain = 'foo.com';
function test()
{
    pipeFrame.testIframe();
}
    </script>
    <iframe style="" src="http://scripts.api.foo.com/iframe.html" width="500" height="50" id="pipeFrame" name="pipeFrame"></iframe>
        <form>
           <p>
               <input type="button" value="Hop" onclick="test();" />
           </p>        
        </form>

   </body>
</html>

The alert window always contains "302" (Redirect) with Firefox 3.6/Chrome, "0" with IE8 ... Though Firebug tells me my request got a "200 Ok" status (and no response) ...

I've tried, directly on scripts.api.foo.com/iframe.html, to lauch the same request, and got the same status code.

I'm quite frustrated, after vainly searching all over the web a clear way to implement cross-subdomain, or an explanation about those status code ... Any help would be welcome.

Thanks a lots for your attention. Bye.

like image 671
benjaminplanche Avatar asked Feb 19 '11 18:02

benjaminplanche


1 Answers

Unfortunately the rules for cross-domain requests also end up blocking requests that are within a subdomain even though technically it's the same server. You can either run through proxy or use a cross-domain hack to allow the $.ajax call to operate. There's a really good article on using iFrames and cross domain stuff here

http://softwareas.com/cross-domain-communication-with-iframes

like image 157
brianjhong Avatar answered Sep 28 '22 15:09

brianjhong