jQuery Ajax 跨站脚本答案

【问题标题】：jQuery Ajax Cross-site scriptingjQuery Ajax 跨站脚本
【发布时间】：2014-08-04 05:08:57
【问题描述】：

我知道这个问题之前已经被问过（很多次），但我似乎仍然无法正确回答。

我想在 jQuery 中执行 AJAX 请求并获取“任意”内容 - 例如可能是html、text、json、img

当我执行以下操作时，我得到了臭名昭著的 请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'http://mydomain.com'。

$.ajax({
            url: "http://www.pureexample.com/jquery/cross-domain-ajax.html",
            // dataType: "jsonp",
            crossDomain: true,   
            success: function (data) {
                        console.log('success');
                         console.log(data);

           },
            error: function(request, status, error) {
                    console.log('Error on request. ' + request.responseText);
                    alert('Error on request. ' + request.responseText);
                }
        });

我没有提供数据，所以我不能在服务器端做任何事情来允许跨域请求。我相信指定 JSONP （注释掉）假设 JSON 被返回？不管有没有，它都行不通。

所以，底线 - 是否有一种“简单”的方式来处理跨域请求，以便我可以获得结果并插入标签（例如 html 到 DIV）

非常感谢任何帮助或进一步的解释。

谢谢。抢

【问题讨论】：

如果远程服务器没有明确提供 JSONP 响应，那么您可以做的唯一事情就是通过您自己的服务器代理这些请求，这样 SOP 就不会申请。

标签： jquery ajax cross-domain

【解决方案1】：

前段时间，我在使用外部网络服务检索巴西的邮政编码数据（地址等）时遇到了这个问题。并且我使用了与您相同的方法。

有几点需要强调：

1) Ajax 不允许安全协议差异。这意味着，如果您的页面受到安全协议 (HTTPS) 的保护，您的浏览器将不允许允许外部服务器通过不安全的协议 (HTTP) 返回。（我在开发后期才发现这个，结果是使用.NET的webrequest）

2) 将数据类型设置为“JSONP”不会转换对 JSON 的响应。它允许它被这样接收。

3) JSONP 是only 接受跨域请求的数据类型。您描述的错误信息可能是由于这个原因。

所以，总结一下：

在谈论使用 ajax 的跨域请求时，“任意”内容仅限于 JSON(P)。并且收到的数据必须是 JSON。

此外，在 jQuery 1.5 之前，如果响应没有正确键入为 JSON，不会引发错误。

我希望我在开始开发之前就知道这些问题...将组件上传到生产服务器却不知道从 SSL-Layered 服务器请求存储在 HTTP 中的数据是一个相当尴尬的事实。 ...（尽管实际上还是可以预测的）

欲了解更多信息：http://api.jquery.com/jquery.ajax/

【讨论】：

重要提示：对 JSONP 请求的响应不是 JSON。相反，它是一个函数调用。

【解决方案2】：

你需要使用 Ajax-cross-origin 一个 jQuery 插件。

这个插件让你可以跨域使用jQuery.ajax()。

像这样使用它：

$.ajax({
    crossOrigin: true,
    url: url,
    success: function(data) {
        console.log(data);
    }
});

您可以在此处阅读更多内容：http://www.ajax-cross-origin.com/

【讨论】：

【解决方案3】：

感谢您的回复。非常有帮助。我决定采用代理方法，我在这里找到了一个简单的解决方案：http://www.paulund.co.uk/make-cross-domain-ajax-calls-with-jquery-and-php

为了简单起见，我在此处添加了代码。

我创建了一个名为 crossdomain.html 的文件。包括 jquery 库。创建了以下 Javascript 函数：

function requestDataByProxy()
    {
        var url = "http://UrlYouWantToAcccess.html";
        var data = "url=" + url + "&parameters=1&para=2";    

        $.ajax({
            url: "our_domain_url.php",
            data: data,
            type: "POST",
            success: function(data, textStatus, jqXHR){
                console.log('Success ' + data);
                $('#jsonData').html(data);
            },
            error: function (jqXHR, textStatus, errorThrown){
                console.log('Error ' + jqXHR);
            }
        });
    }

我还在 HTML 中添加了一个简单的按钮和 pre 标记来加载结果：

<button onclick="requestDataByProxy()">Request Data By Proxy</button>

<h3>Requsted Data</h3>
<pre id="jsonData"></pre>

然后，使用 cURL 的 PHP 文件 our_domain_url.php（确保您已启用此功能！）

<?php

//set POST variables
$url = $_POST['url'];
unset($_POST['url']);

$fields_string = "";
//url-ify the data for the POST
foreach($_POST as $key=>$value) { 
    $fields_string .= $key.'='.$value.'&'; 
}
$fields_string = rtrim($fields_string,'&');

//open connection
$ch = curl_init();

//set the url, number of POST vars, POST data
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_POST,count($_POST));
curl_setopt($ch,CURLOPT_POSTFIELDS,$fields_string);

//execute post
$result = curl_exec($ch);

//close connection
curl_close($ch);

?>

对我来说，这是一个相当直接的解决方案。

希望这对其他人有帮助！

罗伯

【讨论】：