Question

我设法让跨域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和读取 - 或刷新ajaxsubmit绑定......

任何想法都会被感激不尽。

Answer 1

固定!!!

我使用jquery postmessage plugin来捕获iframe的响应。解析后的响应很简单：

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

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

跨域ajax请求 - 重新提交时的XD安全性错误

1 个答案: