IE9 中的跨域 AJAX 在 CQ5 中不起作用答案

【问题标题】：Cross Domain AJAX in IE9 not working in CQ5IE9 中的跨域 AJAX 在 CQ5 中不起作用
【发布时间】：2014-11-24 18:59:04
【问题描述】：

我需要使用 jQuery AJAX 发送跨域请求。但它在 IE9 中不起作用。

奇怪的是，当我在独立的 HTML 文件中尝试它时，它运行良好。但在 CQ 页面中完成时会中断。

js代码如下：

 $.support.cors = true;

    $.ajax({
        cache: false,
        url: "https://www.some.external.web.service",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        type: "POST",
        crossDomain: true,
        data: "{"key":"value"}",
        processData: false,
        success: function (response) { alert("success"); },

         error: function (xhr, status, error) { alert("AJAX Error:status: "+ status+ "\nerror: " + error + "\nxhr.status: " + xhr.status + "\nResponseText: \n" + xhr.responseText);  }
        });

我尝试使用数据类型作为“jsonp”，但仍然无济于事。在 IE9 中，它从不返回 'Success' 处理程序，并且总是转到 'error' 处理程序。

显示的错误是“传输错误”。

网络服务在 https 中，我的页面可以是 http(author) 或 http(publish)

我已经在 ajax 之前设置了 $.support.cors = true;。我错过了什么？

【问题讨论】：

错误是什么？你是从 https 转到 http 吗？
data: "{key:"+value+"}" ? （刚第一次见到）
更新了问题。 JSON 数据不是问题。错误是“传输错误”，服务是 https，而我的页面可以是 http 或 https
要在 IE8/9（IE7 不支持 CORS）中执行 CORS 请求，您必须使用 XDomainRequest 对象。 jQuery 不会为您实现这一点，您必须手动发送请求或包含实现它的 jQuery 插件。在 IE10+ 中，这应该不是问题，但是还有其他细微的差异仍然可能导致问题。
另请注意，$.support.cors = true; 毫无意义，crossDomain: true, 在您的情况下什么也不做，如果data 确实是一个 json 字符串，则不需要processData: false,。

标签： javascript jquery ajax cross-domain aem

【解决方案1】：

由于分别是 GET 和文本内容，我无法使用 JSONP 或 XDR。

为此，我在我的页面中添加了一个 iframe，其 HTML 驻留在客户端的服务器中。因此，我们将数据发布到 iframe，然后 iframe 将其发布到 Web 服务。因此消除了跨域引用。

我们添加了双向来源检查，以确认仅授权页面将数据发布到 iframe 和从 iframe 发布数据。

<iframe style="display:none;" id='receiver' name="receiver" src="https://iframe-address-at-client-server">
 </iframe>

//send data to iframe
var hiddenFrame = document.getElementById('receiver').contentWindow;
hiddenFrame.postMessage(JSON.stringify(message), 'https://client-server-url');

//The iframe receives the data using the code:
window.onload = function () {
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    eventer(messageEvent, function (e) {
        var origin = e.origin;
        //if origin not in pre-defined list, break and return
        var messageFromParent = JSON.parse(e.data);
        var json = messageFromParent.data;

        //send json to web service using AJAX- same origin now  
        //return the response back to source
        e.source.postMessage(JSON.stringify(aJAXResponse), e.origin);
    }, false);
}

【讨论】：