使用 Jquery 和 IFrame 进行跨子域请求（GET、POST...）

发布于 2024-10-18 16:57:26 字数 2579 浏览 5 评论 0原文

我正在尝试在我的主域 (http://foo.com) 和我的 API (http://api.foo.com) 之间开发请求。

为了绕过跨子域的限制，我在主页 (http.//foo.com/main.html) 上使用 Iframe，指向页面 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上启动相同的请求，并得到相同的状态代码。

在网上徒劳地搜索实现跨子域的明确方法或有关这些状态代码的解释之后，我感到非常沮丧...... 欢迎任何帮助。

非常感谢您的关注。再见。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

追星践月 2024-10-25 16:57:26

不幸的是，跨域请求的规则最终也会阻止子域内的请求，即使从技术上讲它是同一台服务器。您可以通过代理运行或使用跨域黑客来允许 $.ajax 调用运行。这里有一篇关于使用 iFrame 和跨域内容的非常好的文章

http://softwareas.com/使用 iframe 进行跨域通信

回复收藏 0 原文

情深已缘浅 2024-10-25 16:57:26

如果您仅针对现代浏览器（例如 IE 8），则可以实现 OPTIONS 请求。现代浏览器在尝试执行跨站点 GET 请求之前，会向目标 (scripts.api.foo.com) 发送 OPTIONS 请求，询问是否可以在源 (foo.com) 上使用其脚本。然后，Web 服务器可以发送一个响应，其中显示：当然，您可以在 foo.com 上使用我的脚本。

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

回复收藏 0 原文

盛夏尉蓝 2024-10-25 16:57:26

默认情况下，jQuery ajax 函数在 IE 中不起作用，相当于 XHR CORS（称为 XDR for 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;}
});

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

回复收藏 0 原文

半窗疏影 2024-10-25 16:57:26

只是把它扔在那里，但为什么不使用 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
    });

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

回复收藏 0 原文

~没有更多了~