La croix-sous-domaine de Requêtes (GET, POST, ...) avec Jquery et IFrame

Je suis en train de développer des requêtes entre mon domaine principal (http://foo.com) et de mon API (http://api.foo.com).

De contourner les restrictions sur le sous-domaine des trucs, j'utilise une Iframe, sur ma page principale (http.//foo.com/main.html), en pointant sur une page iframe.html il y a : scripts.api.foo.com.

(scripts.api.foo.com et foo.com sont sur le même serveur, api.foo.com sur les autres)

>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>

La fenêtre d'alerte contient toujours "302" (Redirection) avec Firefox 3.6/Chrome, "0" avec IE8 ... Si Firebug me dit que ma demande a un "200 Ok" (et pas de réponse) ...

J'ai essayé, directement sur scripts.api.foo.com/iframe.html, à lancer la même demande, et a obtenu le même code d'état.

Je suis très frustré, après avoir vainement à la recherche sur le web, un moyen de mettre en œuvre la croix-sous-domaine, ou une explication à propos de ces code d'état ...
Toute aide serait la bienvenue.

Merci beaucoup pour votre attention.
Bye.

OriginalL'auteur Aldream | 2011-02-19

  1. 5

    Malheureusement, les règles pour les demandes inter-domaine aussi le blocage des demandes qui sont à l'intérieur d'un sous-domaine, même si techniquement c'est le même serveur. Vous pouvez soit exécuter par l'intermédiaire de proxy ou de l'utilisation d'un cross-domain hack pour permettre à l' $.appel ajax pour fonctionner. Il y a un très bon article sur l'utilisation des iFrames et croix domaine des trucs ici

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

    Eh bien, j'ai déjà lu cet article, mais n'a pas pu vraiment développer une solution à partir de sa théorie ... Et la solution proxy semble assez lourd pour moi. La croix-sous-domaine est un problème commun pour quiconque d'essayer de développer des services avec une API ... Comment est-il il n'y a pas de consensus sur la façon de résoudre ?

    OriginalL'auteur brianjhong

  2. 3

    Si vous êtes seulement cibler les navigateurs modernes (par exemple, IE 8), vous pourriez mettre en œuvre les OPTIONS de demande. Un navigateur moderne, avant de tenter d'exécuter un cross-site OBTENIR une demande, envoyez une requête OPTIONS de la cible (scripts.api.foo.com) pour lui demander si c'est OK pour utiliser leurs scripts sur la source (foo.com). Le serveur web peut envoyer une réponse qui dit, bien Sûr, vous pouvez utiliser mes scripts sur foo.com.

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

    Merci pour l'information, mais je suis à la recherche d'une solution à l'échelle mondiale ... à l'Aide d'une Iframe semblait une très bonne idée, mais si je peut établir la communication entre ma page principale (foo.com/main.html) et de ses Iframe (pointant sur scripts.api.foo.com), les demandes envoyées à partir de scripts.api.foo.com ne pas atteindre mes serveurs sur api.foo.com ... je pensais que les demandes ont été autorisés entre un (sous-)sous-domaine et ses sous-domaine, mais il ne fonctionne pas ici. (Est-ce parce que api.foo.com et scripts.api.foo.com ne sont pas sur le même hôte ?) Merci pour votre aide, et bonne journée.
    Vous ne pouvez pas obtenir les informations de retour de l'iframe dans votre fenêtre principale, car c'est précisément ce que le cross-site-scripting règles visent à éviter. Vous pouvez charger Url de l'iframe, oui, mais si vous avez été en mesure de lire, vous pouvez également charger une banque de l'URL de l'iframe et relire la banque de l'utilisateur de l'information dans votre cadre de plus haut niveau.

    OriginalL'auteur Jack Saalwächter

  3. 3

    L'ajax de jQuery ne fonctionne pas par défaut avec IE est équivalent à XHR de la SCRO appelé XDR pour XDomainRequest...
    Juste à ajouter que avant d'effectuer votre premier appel ajax et il peut travailler dans votre cas...

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

    OriginalL'auteur Romain Stievenard

  4. 0

    Juste jeter là-bas, mais pourquoi ne pas 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
    });

    OriginalL'auteur pim