Question

我使用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>

Answer 1

您无法跨域进行跨域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
}

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

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

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

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

Answer 2

从将exampleA.com提供HTML文档的浏览器向域名为exampleB.com的服务器发出跨域请求的另一个解决方案是使用代理。

假设您使用的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。同样，无论您使用何种语言，都应该能够从字符串中返回数据。

将上述代码放在名为“getJSON.php”的文件中，假设您使用的是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代码中，您将同域AJAX请求发送到您的服务器exampleA.com ，然后您的服务器代表您发出请求到exampleB.com获取数据，然后exampleA.com将响应中的数据返回给浏览器。

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

2 个答案: