CODEWITHSUNDEEP
jqueryajaxiframecross-domainsubdomain
benjaminplanche
benjaminplanche

Reputation: 15129

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.

Upvotes: 5

Views: 17843

Answers (4)

pim
pim

Reputation: 12587

Just throwing it out there, but why not JSONP? 

    $.ajax({
        url: "http://api.foo.com/utctime",
        type: "POST",
        dataType: "jsonp",
        jsonp: "callback",
        timeout: 7000,
    })
    .success(function (result) {
        //do something with the result
    })
    .error(function (err) {
        //do something if err;d
    });

Upvotes: 0

Romain Stievenard
Romain Stievenard

Reputation: 137

The jQuery ajax function doesn't work by default with IE's equivalent to XHR CORS called XDR for XDomainRequest... Just add that before your first ajax call and it may work in your case...

$(document).ready(function(e) {
    // CORS + XDR for Internet Explorer
    if ('XDomainRequest' in window&&window.XDomainRequest!==null)
    {jQuery.ajaxSettings.xhr=function(){try{return new XDomainRequest();}
    catch(e){}}; jQuery.support.cors = true;}
});

Upvotes: 3

Jack Saalw&#228;chter
Jack Saalw&#228;chter

Reputation: 211

If you are only targeting modern browsers (eg, IE 8), you could implement the OPTIONS request. A modern browser will, before attempting to execute a cross-site GET request, send an OPTIONS request to the target (scripts.api.foo.com) to ask if it's OK to use their scripts on the source (foo.com). The web server can then send a response which says, Sure, you can use my scripts on foo.com.

http://www.w3.org/TR/cors/

Upvotes: 3

brianjhong
brianjhong

Reputation: 374

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

Upvotes: 5

Related Questions