0

我已经设法让跨域 ajax 请求正常工作。我现在遇到的问题是，这适用于第一次提交，但任何后续提交没有页面刷新都会违反浏览器中的域安全检查。

我的本地机器上有 2 个域；“www.webservice.dev”和“www.consume.dev”。

在consume.dev上，我像这样插入一些托管在webservice上的js。

<script type="text/javascript">
$(function(){
var $scrpt = $('<script />');
$scrpt.attr({
    'type' : 'text/javascript',
    'src':'http://www.webservice.dev/_assets/script/processEvent.js'
});
$('head').append($scrpt);

});
</script>

该脚本包含：

$(function() {

    var $scrpt = $('<script />');

    $scrpt.attr({
        'type' : 'text/javascript',
        'src' : 'http://www.webservice.dev/_assets/script/jquery/plugins/jquery.form/jquery.form.js'
    });

    $('head').append($scrpt);

    $('<iframe />')
        .attr({
            'id' : 'eventFormTarget',
            'name' : 'eventFormTarget'
        })
        .css( {
            'width' : '1px',
            'height' : '1px',
            'position' : 'absolute',
            'left' : '-9999px',
            'top' : '-9999px'
        })
        .prependTo('body');

    $('#event-form').bind('submit', function(){
        $(this).ajaxSubmit({
            url         : 'http://www.webservice.dev/webservices.php',
            type        : 'POST',
            dataType    : 'html',
            data        : {
                              ajax : 'true',
                              webservice : 'processEvent'
                          },
            error       : function(jqXHR, textStatus, errorThrown) {
                              console.log(jqXHR, textStatus, errorThrown);
                              /*
                               * try{ $('#event-form').trigger('submit'); }catch(e){
                               * console.log(e); };
                               */
                          },
            complete    : function(){

                          },
            iframeTarget : '#eventFormTarget',
            iframe      : true
        });
        return false;
    });

});

现在希望您会从脚本中看到我在页面中添加了一个 iframe 并使用 jquery 表单插件来执行魔术。由于帖子是通过 iframe ajaxSubmit 完成的，因此没有得到对进程的响应-我在其他地方处理...

但是错误响应是可用的。

在第一次提交表单时，也没有检测到错误，我可以在 webservice.dev 上检查我的处理代码的结果。一旦发送另一个请求，就会触发错误事件，在 Chrome 控制台中产生以下内容（firebug 非常相似）：

Unsafe JavaScript attempt to access frame with URL http://www.nmssys.dev/webservices.php from frame with URL http://dev.dev/. Domains, protocols and ports must match. jquery.form.js:904
[jquery.form] Server abort: TypeError: Cannot read property 'readyState' of undefined (TypeError)
Unsafe JavaScript attempt to access frame with URL http://www.nmssys.dev/webservices.php from frame with URL http://dev.dev/. Domains, protocols and ports must match. jquery.form.js:904
[jquery.form] aborting upload... aborted
Object "aborted" "server abort"

您可能会在我的代码中注意到我尝试排除错误并触发进一步的提交。这将成功，但结果不同。在 Firefox 中，单次进一步提交似乎成功，但 chrome 可以进一步提交 3-5 次。

我非常想要一个能够阻止所有这些 shananigans 的解决方案。像删除 iframe 和 readding 之类的东西 - 或者刷新 ajaxsubmit 绑定......

任何想法将不胜感激。

4

1 回答 1

0

固定的！！！

我使用了jquery postmessage 插件来捕获来自 iframe 的响应。解析响应后，一个简单的：

$('iframe').attr('src','');

让一切都再次变得笨拙...

于 2011-07-26T11:44:40.233 回答