带有远程 URL 的 JSONP 不起作用

Posted

技术标签:

【中文标题】带有远程 URL 的 JSONP 不起作用【英文标题】:JSONP with remote URL does not work 【发布时间】:2015-06-17 20:29:39 【问题描述】:

在以下代码中,有一个以 JSON 格式返回结果的 url。我想阅读 JSON 并在我的代码中解析它。但是,当我运行代码时,结果为空。似乎我无法发送跨域 AJAX 请求!

我还尝试通过编写xhrFields: withCredentials: true , crossDomain: true, 在代码中包含Access-Control-Allow-Credentials: true,但它再次不起作用。它给出了以下错误: Error: jQuery111209679192922043036_1428845360268 was not called

  $.ajax(

 url:"http://ec.europa.eu/semantic_webgate/query/sparql?dataset=rasff&format=json&limit=10&query=select%20?p%20where%20++?s%20?p%20?o+",
 dataType:'jsonp',
 type:"GET",
 
 success:function(data)
 
 	alert("Data from Server"+JSON.stringify(data));
 ,
 error:function(jqXHR,textStatus,errorThrown)
 
 	alert("You can not send Cross Domain AJAX requests : "+errorThrown);
 
);

如何编写 jsonp 代码来读取 this url ?

【问题讨论】:

要知道的是,json != jsonp 【参考方案1】:

对于 JSONP,将您的 dataType:'json' 设置为 dataType:'jsonp'。此外,您的服务器需要了解 JSONP。真正的 JSONP 感知 Web 服务将读取 URL 的强制 ?callback=? 参数。

正确的 JSONP 响应如下所示:http://ip.jsontest.com/?callback=methodName with response:

methodName("ip": "151.194.190.31");

解决方案 1 - 带有回调的 JSONP

确定该 URL 是否支持 JSONP 和回调名称。如果是这样,请使用回调参数并使用 JSONP。没有CORS 问题。这是一个示例Fiddle。

更多信息:jquery + jsonp return syntax error even when the response is json

解决方案 2 - 允许 CORS 并使用纯 JSON

Access-Control-Allow-Origin: * 添加到来自该 URL 的响应(如果您可以控制它),并将其作为 JSON 响应(不是 JSONP)处理。

解决方案 3 - DIY JSONP 包装器

如果该 URL 不支持 JSONP,并且它不允许 CORS,那么您可以通过使用一些服务器端代码来作弊,以抓取该 URL 的 JSON 结果,然后将 JSON 包装在一个回调函数中,设置标头到Access-Control-Allow-Origin: *,并将结果返回到您的 AJAX JSONP 脚本。很整洁吧?

哦,给你:

<?php
// xss-service.php - Bare-bones demo by @Drakes
$callback = isset($_GET["callback"]) ? $_GET["callback"] : "?";

$json = file_get_contents('http://ec.europa.eu/semantic_webgate/query/sparql?dataset=rasff&format=json&limit=10&query=select%20?p%20where%20%20%7B%20?s%20?p%20?o%20%7D');

header('Access-Control-Allow-Origin: *');
header("Content-type: application/json");
echo $callback . "(" . $json . ");";
?>

解决方案 4 - JSONP 代理服务

如果您现在只需要让它工作,您可以使用在线 JSONP 代理服务,例如,Yahoo's YQL service。然后,使用没有 JSONP 和 CORS 的 URL,您可以:

var theUrl = "http://ec.europa.eu/semantic_webgate/query/sparql?dataset=rasff&format=json&limit=10&query=select%20?p%20where%20%20%7B%20?s%20?p%20?o%20%7D";

var yql = 'http://query.yahooapis.com/v1/public/yql?'
        + 'q=' + encodeURIComponent('select * from json where url=@url')
        + '&url=' + encodeURIComponent(theUrl)
        + '&format=json&callback=?';

$.getJSON(yql,
  function (data) 
    alert(JSON.stringify(data));
  
);

演示:http://jsfiddle.net/L4foze7t/

【讨论】:

感谢您的回复。我收到以下错误:Error: jQuery111209679192922043036_1428845360268 was not called 请查看我提供的链接。它显示了您的问题的示例以及如何解决它 那么有什么方法可以读取和处理来自上述 URL 的 JSON 吗? 这是您的网址吗?你控制它吗?现在它没有响应 Access-Control-Allow-Origin: * 标头......所以没有。 这是正确的 JSONP 响应的样子:ip.jsontest.com/?callback=methodName

以上是关于带有远程 URL 的 JSONP 不起作用的主要内容,如果未能解决你的问题,请参考以下文章

从外部 url 访问数据的问题 - jsonp/json 方法不起作用

带有远程参数的引导模式不起作用

带有重定向 URL 的 UIImageView 不起作用

Angularjs JSONP不起作用

带有 Spring 的 CORS 不起作用

为啥 JsonP 不起作用? [复制]