Question

我知道这个问题曾经被问过很多次，但我似乎仍然无法做到正确。

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

当我执行类似下面的操作时，我会臭名昭着 请求的资源上没有“Access-Control-Allow-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）

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

感谢。罗布

Answer 1

我在前一段时间遇到过这个问题，当时使用外部网络服务来检索巴西的邮政编码数据（地址等）。我使用的方法和你做的一样。

有几点需要强调：

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

2）将数据类型设置为＆＃34; JSONP＆＃34;不会转换对JSON的响应。它允许它被接收。

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

所以，总结一下：

在谈论使用ajax的跨域请求时，＆＃34;任意＆＃34;内容仅限于JSON（P）。并且收到的数据必须是JSON。

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

我希望在开始开发之前我已经知道了这些问题...将组件上传到生产服务器时，不知道从SSL分层服务器请求存储在HTTP中的数据是一件非常尴尬的事情。 ......（虽然实际上仍然可以预测）

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

Answer 2

您需要使用Ajax-cross-origin jQuery插件。

这个插件允许你使用jQuery.ajax（）跨域。

像这样使用：

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

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

Answer 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中添加了一个简单的按钮和预标记来加载结果：

<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);

?>

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

希望这有助于其他人！

罗布

jQuery Ajax跨站点脚本

3 个答案: