跨域问题（在 IE 中工作而不是在其他浏览器中）答案

【问题标题】：Cross Domain issue(Working in IE not in other browser)跨域问题（在 IE 中工作而不是在其他浏览器中）
【发布时间】：2012-10-06 06:20:03
【问题描述】：

我正在使用 AJAX 调用从 URL 获取数据。它给了我一个 json 对象。

当我运行该应用程序时，该页面在 IE 中运行良好，并且符合以下条件：该页面正在访问不受其控制的信息。

这会带来安全风险。要继续吗？

但这不适用于其他浏览器，如 Firefox、Chrome、Safari 等。

我不知道是什么问题。请向我解释为什么会发生这种情况以及如何解决这个问题？

我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Search Engine</title>
    <script src="JS/jquery-1.4.2.min.js"></script>
    <script>
    $(document).ready(function () {
        $.support.cors = true;
        // create a script tag element
        var script = document.createElement("script");
        // set the attribute, using the URL to pass data via query parameters
        script.setAttribute("src", "http://192.168.13.111:7090/?uname=bhagirathip&wt=json&fl=*,score");
        script.setAttribute("type", "text/javascript");
        // add the script tag to the document head, forcing an HTTP request
        document.getElementsByTagName("head")[0].appendChild(script);
    });
    function Search() {
        function callbackJsonHandler(data) {
             alert(data);  // This is the JSON data
        }
    }
</script>
</head>
<body>
    <form id="form">
        <div style="text-align: center">
        <input type="search" id="searchInput" autofocus />
        <input type="button" id="btnSearch" onclick="Search()" value="Search" />
    </div>
</form>
</body>
</html>

【问题讨论】：

正如jmort253 在下面的答案中指出的那样，您可以使用jsonp 和callback 来实现它，这应该像使用jquery 一样容易。
我不清楚您要做什么。您仍在尝试进行跨域 ajax 调用，但这是行不通的，并且您还在 document.ready 中发出脚本标记请求，这将用于发出请求，但要检索数据，数据必须作为函数调用发送回浏览器。你需要一个function callbackJsonHandler(data)，就像我在回答中所说的那样，你的服务器必须发回一个callbackJsonHandler({ /*JSON goes here */);。它还有助于查看发送响应所涉及的服务器端代码。考虑将其添加到edit。
你能分享一步一步的方法吗？实际上我在 jquery 中很弱。我必须在服务器中更改？？实际上我无权访问服务器
我添加了另一个描述代理方法的答案。它有点宽泛，并且您缺少诸如您正在使用的服务器端语言、谁拥有服务器以及其他重要细节等细节，但它应该可以帮助您入门。祝你好运！
我使用 asp.net C# 作为服务器端。

标签： ajax jquery cross-domain

【解决方案1】：

另一个解决从浏览器发出跨域请求的问题的方法是使用代理。

假设您正在使用的 HTML 文档来自 exampleA.com。您拥有 exampleA.com，您可以访问服务器端和客户端代码。另一方面，exampleB.com 是由其他人拥有或控制的远程服务器。 exampleB.com 有一些您想在 exampleA.com 中使用的数据。

我们知道 AJAX 无法工作，因为同源政策是为了保护流氓应用免于对人们的数据做坏事。但是，服务器不限于相同的域策略。这意味着您的应用可以执行以下操作：

||exampleA.com/test.html|| ---> http req --> ||exampleA.com/getData|| --http req --> ||exampleB.com/getJSON||

服务器端：（如您的服务器，exampleA.com）：

换句话说，在您用来提供 HTML 的服务器上，您编写了一些代码，从您的服务器向第三方服务器发出 HTTP 请求：

// JSON URL which should be requested
$json_url = 'http://www.exampleB.com/getJSON';

// Initializing curl
$ch = curl_init( $json_url );

// Configuring curl options
$options = array(
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => array('Content-type: application/json') 
);

// Setting curl options
curl_setopt_array( $ch, $options );

// Getting results
$result =  curl_exec($ch); // Getting JSON result string

请参阅Getting JSON Data with PHP Curl 了解更多详情。每个服务器端平台都能够与服务器建立 HTTP 连接。

// now, send the data in the response
HttpResponse::status(200);
HttpResponse::setContentType('application/json');
HttpResponse::setData($result);
HttpResponse::send();

见PHP HTTPResponse。同样，您使用的任何语言都应该能够从字符串返回数据。

假设您使用的是 PHP，请将上述代码放入名为“getJSON.php”的文件中。确保开头<?php 和文档开头之间没有空格；否则，您将无法设置标题。发送此响应可能有更好的方法，但由于未指定您的平台，我将把它作为练习留给读者。

客户端代码：

    var searchURL = "/getJSON.php"; //From this URL json formatted data is present.
    $.ajax({
        url: searchURL,
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            try {
               alert(data);
            }
            catch (err) {
               alert(err);
            }
        }
    });

现在，在上面的 JavaScript 代码中，您向 您的服务器 exampleA.com 发出 同域 AJAX 请求，然后您的服务器代表您发出请求到 exampleB.com 获取数据，然后 exampleA.com 将响应中的数据返回给浏览器。

【讨论】：

【解决方案2】：

您不能跨域进行跨域 AJAX 调用。这是 Web 浏览器中的一项安全功能，可防止恶意 JavaScript 代码抓取网页中呈现的数据，然后将其发送到其他域上的某个流氓网站。

通过将 AJAX 请求限制在同一域中，浏览器供应商确保从其他来源导入的 JavaScript 不能将数据发送到提供 HTML 页面的服务器以外的任何服务器。

在 Internet Explorer 中，它会提示您，但任何遇到此类消息的聪明用户都可能会拒绝。向您的用户显示此类警告消息不是一种良好的设计实践，也不会激发您对应用程序合法性的信心。

您可以跨域发送数据的唯一方法是使用一种称为“脚本标记远程处理”的浏览器黑客技术，该技术本质上涉及使用不受相同域策略限制的 HTML 元素。例如script 标签可以向任何服务器发出 HTTP GET 请求：

// create a script tag element
var script = document.createElement("script");

// set the attribute, using the URL to pass data via query parameters
script.setAttribute("src","http://192.168.9.11/userInput/?key="+userInput);
script.setAttribute("type","text/javascript");

// add the script tag to the document head, forcing an HTTP request
document.getElementsByTagName("head")[0].appendChild(script);

使用此方法，您可以将数据发送到远程服务器。请注意，要取回 JSON 数据，您必须将其包装或填充到 JavaScript 函数中，并在 JavaScript 代码中定义回调以处理响应：

function callbackJsonHandler(data) {
    alert(data);  // This is the JSON data
}

并且您的服务器端代码必须返回内容文本/javascript、调用处理程序并将您的 JSON 作为参数传递：

callbackJsonHandler({"key":"value","key1":"value2"});

当浏览器将 JavaScript 下载到浏览器时，JavaScript 会立即运行，从而为您提供一个挂钩来访问响应中的 JSON。

由于您使用的是 jQuery，您还可以查看 jQuery JSONP 或带有 Padding 的 JSON，它可用于生成 JavaScript 响应，以便您可以处理从这些请求到远程服务器的回调。请注意，必须设置服务器以处理 JSONP 请求才能正常工作，类似于上述设置。

【讨论】：

有没有其他方法可以在不使用ajax的情况下访问跨域数据。我读到一些地方，如果我们将 Access-Control-Allow-Origin 设置为（站点或 *），我们可以访问跨域数据。
大声笑，是的。脚本标记远程处理和 JSONP。这些都不是AJAX。 :) 好吧，您可以使用代理，但这有点复杂。基本上，您的页面通过 AJAX 调用您的服务器，您的服务器向远程服务器发出 HTTP 请求，然后获取响应并将其发回。 page -> your server -> remote server
能否分享其他获取数据的方法。
我得运行@bhagirathi，催眠电话，但这应该可以帮助你开始：stackoverflow.com/q/10675241/552792 和stackoverflow.com/q/7638773/552792 祝你好运！ :)
嗨 jmort253 我试过但没有成功。请帮忙请指出我做错了什么？