Запросы между поддоменами (GET, POST, ...) с помощью Jquery и IFrame - PullRequest
Новая
       12

Запросы между поддоменами (GET, POST, ...) с помощью Jquery и IFrame

5 голосов
/ 19 февраля 2011

Я пытаюсь разработать запросы между моим основным доменом (http://foo.com) и мой API (http://api.foo.com).

). Чтобы обойти ограничения, связанные с работой между поддоменами, я использую Iframe на своей главной странице (http.//foo.com/main.html), указывая на страницу iframe.html: scripts.api.foo.com.

(scripts.api.foo.com и foo.comна том же сервере api.foo.com на другом)

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

Окно предупреждения всегда содержит « 302 » (перенаправление) с Firefox 3.6 / Chrome, « 0 » с IE8 ... ХотяFirebug говорит мне, что мой запрос получил статус «200 Ok» (и не получил ответа) ...

Я пытался, прямо на scripts.api.foo.com/iframe.html, запустить тот же запроси получил тот же код состояния.

Я очень расстроен, после тщетного поиска по всему Интернету ясного способа реализации кросс-поддоменов или объяснения этого кода состояния ... Любая помощь будетдобро пожаловать.

Большое спасибо за ваше внимание.Bye.

Ответы [ 4 ]

5 голосов
/ 19 февраля 2011

К сожалению, правила для междоменных запросов также блокируют запросы, которые находятся в поддомене, хотя технически это тот же сервер. Вы можете либо запустить через прокси, либо использовать междоменный хак, чтобы разрешить вызов $ .ajax. Здесь есть действительно хорошая статья об использовании iFrames и междоменных вещах

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

3 голосов
/ 03 февраля 2012

Функция jQuery ajax по умолчанию не работает с IE, эквивалентным XHR CORS, называемым XDR для XDomainRequest ... Просто добавьте это перед вашим первым вызовом ajax, и он может работать в вашем случае ... 

$(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;}
});
3 голосов
/ 19 февраля 2011

Если вы ориентируетесь только на современные браузеры (например, IE 8), вы можете реализовать запрос OPTIONS. Современный браузер, прежде чем пытаться выполнить межсайтовый GET-запрос, отправит запрос OPTIONS целевому объекту (scripts.api.foo.com), чтобы узнать, можно ли использовать его сценарии в источнике (foo.com). Затем веб-сервер может отправить ответ: «Конечно, вы можете использовать мои сценарии на foo.com.

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

0 голосов
/ 24 июня 2016

Просто выкидываю, но почему не 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
    });
...