跨域 XHR答案 - 爱码网

【问题标题】：cross domain XHR跨域 XHR
【发布时间】：2013-04-13 20:52:48
【问题描述】：

您好，我遇到了一个奇怪的问题。我需要使用来自不同域的 web 服务。所以我查看了 chrome addon Simple REST Client 的代码，我发现他们正在使用这个函数来制作 XHR

function sendRequest() {
clearFields();
if ($("#url").val() != "") {
    var a = new XMLHttpRequest;
    a.onreadystatechange = readResponse;
    try {
        a.open($("input[type=radio]:checked").val(), $("#url").val(), true);
        //This code is for adding headers
        var b = $("#headers").val();
        b = b.split("\n");
        for (var c = 0; c < b.length; c++) {
            var d = b[c].split(": ");
            d[1] && a.setRequestHeader(d[0], d[1])
        }
        jQuery.inArray($("input[type=radio]:checked").val(), ["post", "put"]) > -1 ? a.send($("#postputdata").val()) : a.send("")
    } catch (e) {
        console.log(e);

        $("#responsePrint").css("display", "")
    }
} else {
    console.log("no uri");

}
}

所以我创建了一个类似的

    var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var test = $(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", "http://aplikace.mvcr.cz/sbirka-zakonu/SearchResult.aspx?q=1/2013&typeLaw=zakon&what=Cislo_zakona_smlouvy", true);
//xmlhttp.setRequestHeader('Access-Control-Allow-Origin','*');
 xmlhttp.send();

但是使用我的代码，我得到了XMLHttpRequest cannot load http://aplikace.mvcr.cz/sbirka-zakonu/SearchResult.aspx?q=1/2013&typeLaw=zakon&what=Cislo_zakona_smlouvy. Origin http://localhost:51582 is not allowed by Access-Control-Allow-Origin. 那么问题出在哪里？为什么以前的代码有效而我的代码几乎不一样？

编辑：我也试过用这个函数调用hte webservice

$.ajax({
    type: "GET",
    url: "http://aplikace.mvcr.cz/sbirka-zakonu/SearchResult.aspx?q=1/2013&typeLaw=zakon&what=Cislo_zakona_smlouvy",
    contentType: "script; charset=utf-8",
    dataType: "jsonp",
    success: function (msg) {
        var tes = $(msg);
    },
    error: function (xhr, status, err) {
    }
});

我想要做的是将响应读取为 DOM，因为 web 服务返回整个 HTML 页面，我只需要一个 div，但现在我得到了指向这一行的 Uncaught SyntaxError: Unexpected token <

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

正如我在“网络”选项卡中看到的，请求有效，但由于错误，成功函数从未被调用，我无法访问数据。

【问题讨论】：

从localhost:51582运行时原始代码是否有效？
XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin的可能重复

标签： javascript xmlhttprequest cross-domain

【解决方案1】：

正如其他人所指出的，这是由于 Same Origin Policy。这是浏览器强制执行的，这意味着插件可以绕过这个限制。这应该可以回答您最初的问题。

如何解决这个问题？有很多方法，但大多数都需要服务器的某种合作。人们已经在这里提到了其中一些解决方法，显然您尝试了 JSONP 路径并得到了错误。

您为什么会收到错误消息？因为脚本希望得到 JSONP 格式的响应，但它没有：它得到了 HTML 响应。我认为这种方法不适用于您的情况，因为服务器绝对不是为此设计的。

现在真正的问题是：你为什么要这样做？根据你的回答，我可以想到几个解决方案。

例如，如果您需要访问该页面上的信息以显示在您的网站上，我认为最简单的解决方案是使用一些代理（有关更多信息，请参阅http://developer.yahoo.com/javascript/howto-proxy.html）。

如果您只是出于个人目的在自己的机器上使用它，则可以在某些浏览器中专门禁用同源策略检查。

例如，在 Chrome 中，使用以下选项运行它可以解决问题：（警告：不支持！安全性肯定会受到影响）

chrome --disable-web-security

如果您这样做（禁用浏览器的安全检查），即使是简单的：

$.get("http://aplikace.mvcr.cz/sbirka-zakonu/SearchResult.aspx?q=1/2013&typeLaw=zakon&what=Cislo_zakona_smlouvy", function(data) {
    console.log(data);
},'html');

会正常工作。

【讨论】：

【解决方案2】：

Same Orgin Policy Prevents你从做它。因此出现错误http://localhost:51582 is not allowed by Access-Control-Allow-Origin.

【讨论】：

但是 REST 客户端是怎么来的，它是浏览器的插件，因此从我的 IP 运行，它可以工作吗？如果正如你所说，有什么办法让它发挥作用吗？因为当我尝试使用带有参数 jsonp 的 jQuery 和 get() 时它起作用了，但在这种情况下我不能使用 jQuery
如果他们支持 JSONP 而不是发出 JSONP 请求。
我尝试按照 zou 的建议使用 jsonp，但我收到了另一个错误，正如我在编辑中描述的那样

【解决方案3】：

浏览器插件/扩展程序以不同的权限在与常规网页不同的环境中运行。我怀疑你的代码如果做成插件应该可以工作。它只是不能作为常规网页使用。

从 CORS 到代理，有解决此问题的方法。在此处搜索“跨域 ajax”或在 Google 周围搜索。

【讨论】：