Question

在继续之前，我应该有资格说我是javascript的新手。我有C＃和VBA的经验，但是有一些网络想法正在理解。

作为一个侧面项目，我试图从幻想高级联盟API中提取数据（参见示例here）。我一直在关注其他堆栈溢出查询和w3s在线教程，并让基本代码尝试提取以下数据：

function getData() {
var element = document.getElementById("data");
var url = "http://fantasy.premierleague.com/web/api/elements/1/";
var text;

$.getJSON(url, function (player) {
    $.each(player, function (key, val) {
        text += key + ": " + val + "<br>";
    });
});

element.innerHTML = text;}

问题是我通过chrome运行时遇到了同样的错误：

XMLHttpRequest无法加载 http://fantasy.premierleague.com/web/api/elements/1/。没有请求中存在“Access-Control-Allow-Origin”标头资源。

我的代码是否有问题，或者是否有关于API的内容意味着我的代码无法访问它？可以访问上面的链接并查看JSON文件，因此如果javascript代码存在访问限制，为什么会这样？

请参阅下面针对带有HTML的javascript剪辑的代码。

function getData() {
    var element = document.getElementById("data");
    var url = "http://fantasy.premierleague.com/web/api/elements/1/";
    var text;

    $.getJSON(url, function (player) {
        $.each(player, function (key, val) {
            text += key + ": " + val + "<br>";
        });
    });

    element.innerHTML = text;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>FantasyFootballData</title>
<body>
    <button onclick="getData()">Get first player data</button>
    <p id="data"></p>
</body>

Answer 1

此处的问题称为Same Origin Policy。您无法使用javascript / ajax访问来自不同域的资源，除非服务器设置了一些标头（这些标头用作看门人，它们将给定域的白名单允许它们执行调用，并告诉客户端允许它们执行哪些动词/操作）。您应该阅读有关CORS（跨域资源共享）的更多信息，并评估通过JSONP执行请求的可能性，或使用代理客户端来实现您的目标。

API必须具备哪些要求才能使javascript访问信息？

1 个答案: