带有远程 URL 的 JSONP 不起作用

Question

在下面的代码中，有一个 url，returns 结果为 JSON 格式。我想阅读 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？

Answer 1

对于 JSONP，将您的 dataType:'json' 设置为 dataType:'jsonp'。此外，您的服务器需要了解 JSONP。真正的 JSONP-aware 网络服务将读取 URL.

的强制性 ?callback=? 参数

下面是正确的 JSONP 响应：http://ip.jsontest.com/?callback=methodName 响应：

methodName({"ip": "151.194.190.31"});

解决方案 1 - JSON带回调的 P

查明 URL 是否支持 JSONP 和回调名称。如果是这样，请使用回调参数并使用 JSONP。没有 CORS problem. Here is a sample 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，那么你可以通过使用一些 server-side 代码来作弊来抓取 JSON URL 的结果，然后将 JSON 包装在回调函数中，将 header 设置为 Access-Control-Allow-Origin: *，并将 return 结果设置为您的 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/

带有远程 URL 的 JSONP 不起作用

JSONP with remote URL does not work

jquery

json

jsonp

cors

解决方案 1 - JSON带回调的 P

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

解决方案 3 - DIY JSONP 包装器

解决方案 4 - JSONP 代理服务