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

【问题标题】：How to get JSON from external URL using JavaScript (jQuery) Ajax?如何使用 JavaScript (jQuery) Ajax 从外部 URL 获取 JSON？
【发布时间】：2021-09-11 14:49:10
【问题描述】：

我想使用 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/

【问题讨论】：

标签： javascript jquery ajax get

【解决方案1】：

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

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

从源“https://fiddle.jshell.net”访问“https://www.teamspeak.com/versions/client.json”的 XMLHttpRequest 已被 CORS 策略阻止：没有“访问控制-请求的资源上存在 Allow-Origin' 标头。

发生这种情况时（不同的主机），您的请求受same-origin policy 的约束。在这种情况下，浏览器将只允许请求完成如果响应包含一些授权调用的特定标头（例如Access-Control-Allow-Origin）。 More details here.

如何让它发挥作用？

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

【讨论】：