如何使用JavaScript (jQuery) Ajax从外部URL获取JSON ?

Question

我想使用JavaScript (jQuery) Ajax从URL获取一些JSON内容，但它总是无法加载数据。

我的代码很简单:

<div id="content">
loading...
</div>

console.log("jQuery Version: " + jQuery.fn.jquery);
$.ajax({
type: "GET",
url: "https://www.teamspeak.com/versions/server.json",
dataType: "json",
success: function(data){
$("#content").html(data);
console.log("SUCCESS: " + JSON.stringify(data));
},
error: function(data){
$("#content").html("Failed to load data. " + JSON.stringify(data));
console.log("ERROR: " + JSON.stringify(data));
},
complete: function(data){
console.log("COMPLETED: " + JSON.stringify(data));
},
});

页面始终显示以下内容:

Failed to load data. {"readyState":0,"status":0,"statusText":"error"}

当我尝试dataType: "jsonp"(与P)而不是dataType: "json"时，则显示此内容:

Failed to load data. {"readyState":4,"status":200,"statusText":"load"}

所以…成功了，但还在装填?我不明白。当我在浏览器中打开上面提到的URL时，我可以看到application/json格式的数据。

在这里检查代码的结果:https://jsfiddle.net/j2t91osz/1/

Answer 1

您无法完成调用，因为您正在向主机地址(www.teamspeak.com)上的URL发出请求，该URL与HTML页面部署的地址(jsfiddle.net)不同。

查看控制台显示的消息:

从源'https://fiddle.jshell.net'访问'https://www.teamspeak.com/versions/client.json'的XMLHttpRequest已被CORS策略阻止:请求的资源上没有'Access- control - allow - origin '标头。

当这种情况发生时(不同的主机)，您的请求服从同源策略。在这种情况下，只有当响应包含一些授权调用的特定标头(例如Access-Control-Allow-Origin)时，浏览器才允许请求完成。

如何让它工作?

• 如果你有访问服务器的权限，你可以配置它返回必要的报头。(每种服务器/语言都有一种方法来做到这一点-查看这里的一些解决方案。)
• 如果你不控制服务器，你可以镜像它(通过工具，如反向代理，或通过一个非常简单的应用程序，只是转发调用)，并包括所有必要的头在那里。为了演示，您还可以使用免费的CORS代理，例如https://allorigins.win/。参见demo: https://jsfiddle.net/acdcjunior/rc14skf8/(只是不要在生产中使用它，因为他们将能够检查您的所有流量，您不能指望他们的可用性和许多其他问题)