时间戳

首页 > 解决方案 > 如何使用 JavaScript (jQuery) Ajax 从外部 URL 获取 JSON？

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

问题描述

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

标签： javascriptjqueryajaxget

解决方案

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

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

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

当这种情况发生时（不同的主机），您的请求受同源策略的约束。在这种情况下，浏览器将只允许请求完成，如果响应包含一些特定的标题（例如Access-Control-Allow-Origin）授权调用。更多细节在这里。

如何让它发挥作用？

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

推荐阅读