javascript - $.ajax 请求总是 401(未授权)

Question

我正在尝试使用 Kippt API与 $.ajax。

当我使用

curl -X GET -H "X-Kippt-Username:graph1ZzLle" -H "X-Kippt-API-Token:mytoken" https://kippt.com/api/clips/

一切运行良好，我收到了 JSON 响应。

但是，当谈到在这个脚本中使用 jQuery 时:

<script type="text/javascript">
var username = "graph1ZzLle";
var token = "*******";

$(document).ready(function() {
    $.ajax({
        url: "https://kippt.com/api/clips/?list=all&include_data=list&limit=10",
        type: 'GET',
        dataType: 'jsonp',
        async: false,
        beforeSend: function(xhr) {
            xhr.setRequestHeader('X-Kippt-Username', username)
            xhr.setRequestHeader('X-Kippt-API-Token', token)
        },
        success: function(data) {

            for(var i = 0; i < data.objects.length; i++) {

                var row = $("<tr/>");
                var date = new Date(data.objects[i]["created"] * 1000); //js works in milliseconds

                $("<td/>").text(date.toLocaleDateString()).appendTo(row);
                $("<td/>").text(data.objects[i]["list"]["title"]).appendTo(row);
                $("<td/>").append("<a href=" + data.objects[i]["url"] + " >" + data.objects[i]["title"] + "</a>").appendTo(row);

                if(data.objects[i]["notes"]) {
                    $("<td/>").text(data.objects[i]["notes"]).appendTo(row);
                } else {
                    $("<td/>").text("-----").appendTo(row);
                }

                row.appendTo("#kippt");
            }
        },
    });
});
</script>

我总是遇到 401(未经授权)错误。我确定我使用的是正确的用户名和 token 。这是怎么回事？

Answer 1

您不能使用 JSONP 数据类型设置 header 。 JSONP 请求是通过插入 <script> 创建的将 src 设置为目标位置的标记插入到文档中，并且由于您不能传递带有标记的 header ，因此您的 header 设置将被忽略。

要么使用 CORS 和 JSON，要么使用服务器端代理为您获取数据。