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

jquery ajax iframe cross-domain subdomain

17,735

Solution 1

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

Solution 2

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/

Solution 3

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;}
});

17,735

Author by

benjaminplanche

Hacker, Traveler, Art lover — Elated co-author of Hands-On Computer Vision With TensorFlow 2. Into computer vision, deep learning, image processing, procedural generation, and everything leading to more intelligent and aesthetic applications. Can be found there: Personal website — planche.me Google Scholar — https://scholar.google.com/citations?user=cP3ahiAAAAAJ Github — github.com/benjaminplanche Twitter — @benjplanche

Updated on June 04, 2022

Comments

benjaminplanche almost 2 years

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.