如何使用 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

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

查看控制台中显示的消息：

Access to XMLHttpRequest at 'https://www.teamspeak.com/versions/client.json' from origin 'https://fiddle.jshell.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

发生这种情况时（不同主机），您的请求受制于 same-origin policy. In this scenario, the browser will only allow the request to complete if the response contains some specific headers (e.g. Access-Control-Allow-Origin) authorizing the call. More details here.

如何让它发挥作用？

如果您可以访问服务器，则可以将其配置为 return 必要的 headers。（每个 server/language 都有办法做到这一点 - check some solutions here。）
如果您不控制服务器，您可以对其进行镜像（通过 reverse proxies 等工具，或通过一个非常简单的应用程序来转发呼叫）并包括所有必要的 headers 那里
出于演示目的，您还可以使用免费的 CORS 代理，例如 https://allorigins.win/. See demo: https://jsfiddle.net/acdcjunior/rc14skf8/（只是不要在生产中使用它，因为他们将能够检查您的所有流量，您不能依靠他们的可用性和许多其他问题）

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

How to get JSON from external URL using JavaScript (jQuery) Ajax?

javascript

ajax

jquery

get