处理来自 challonge api 的 json

Question

我正在尝试在 Challonge Api 的帮助下构建一个 Power Rankings 应用程序，但是当我检索 json 时，似乎 JS 只是不断向我发送错误。

Test Site

$(document).ready(function(){

$.ajax({
        url: 'https://api.challonge.com/v1/tournaments/3j91s6g1/matches.json',
        type: 'GET',
        dataType: "jsonp",
        success: function (data) {
            // FOR TEST PURPOSE
             $.each(data, function(index, element) {
                $('body').append($('<div>', {
                    text: element.name
                }));
            });
        },
        error : function(error){
            console.log(error)
        }
    });

});

有什么想法吗？

Answer 1

我刚决定使用 php，检索 JSON 没有问题

<?php 
    $json = file_get_contents('https://<edited_apikey>@api.challonge.com/v1/tournaments/3j91s6g1/participants.json/');
    $var = json_decode($json,true);
    //echo $var[0][participant][name];
    foreach($var as $p)
    {
    echo $p[participant][name]."<br />";
    
    }
    ?>

Answer 2

我正在四处寻找有关 Challonge API 的资料，偶然发现了这个问题，以为我会给你一个答案。

您在使用 JavaScript 请求时遇到错误的原因是 Challonge 的 API 没有启用跨域请求。为防止网页使用 Ajax 请求从任何其他网站提取用户数据，Web 浏览器会与其他网站检查是否可以通过查找跨域标头来发送请求。如果您想了解更多信息，可以查看the Wikipedia article 或其他谈论 CORS（跨域资源共享）的网站。

我应该补充的另一件事：您通常不希望与其他任何人共享您的 API 密钥，因为这直接与您的帐户相关联。您问题中 URL 的第一部分是您的用户名：密钥，这意味着发生这种情况的任何人都可以使用它来修改您的括号等。这实际上可能是 Challonge 不允许 CORS 的原因；人们无论如何都不应该从 JavaScript 发送这些请求，因为它需要共享他们的 API 密钥（用户与网页，或网站所有者与用户）。

您还需要小心地将任意文本回显到网页。我不知道 Challonge 的参与者姓名限制，但它可能会导致 cross-site scripting vulnerability。