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

Question

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

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

在 Consumer.dev 上，我插入了一些托管在 Web 服务上的 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 次进一步提交。

我非常希望有一个解决方案能够防止所有这些恶作剧。诸如删除 iframe 和阅读之类的东西 - 或者刷新 ajaxsubmit 绑定...

任何想法将不胜感激。

Answer 1

固定的！！！

我使用 jquery postmessage 插件 来捕获来自 iframe 的响应。一旦响应被简单地解析：

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

让一切再次变得美好......