Question

我正在使用Ajax使用他们的API从twitter获取数据。我正在尝试使用jsonp，从我能看到和理解的东西，我认为我做的一切都是正确的（显然不是）。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  </script>
<script>
    $(document).ready(function () {
        $.ajax( {
            type: 'GET',
            datatype: 'jsonp',
            data: {},
            crossDomain: 'true',
            url: "http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=?",
            error: function(textStatus, errorThrown) {
                alert("error");
            },
            success: function(msg) {
                console.log(msg);
            }
        });
    });
</script>

以上代码在Chrome和Firefox中都会生成错误 XMLHttpRequest无法加载http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=？请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点'null'访问。

根据我的理解，我认为拥有&callback=?并将类型设置为jsonp将允许此成功。更重要的是，我可以看到在fiddler中返回的JSON对象，它只是没有被脚本处理。我已经尝试过多个API，同时出现同样的问题。

当输入地址栏时，一个这样的API也可以使用。

所以我经过广泛的搜索和寻找后，我需要一些如何将原点设置为*？我认为这更像服务器端问题？

我也试过?callback?，但无济于事。

任何想法都会非常棒。

Answer 1

上述资源支持jsonp，因此不需要CORS ......问题是datatype: 'jsonp'它应该是dataType: 'jsonp'

$(document).ready(function () {
    $.ajax({
        type: 'GET',
        dataType: 'jsonp',
        data: {},
        url: "http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=?",
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR)
        },
        success: function (msg) {
            console.log(msg);
        }
    });
});

演示：Fiddle

Answer 2

标题应该在Twitter的服务器响应时设置。如果它不可用，则表示您无法从自己域外的任何位置使用AJAX访问此资源因此，您无法在浏览器上使用来自javascript的API。您已经拥有自己的服务器设置，充当与Twitter API通信的中间资源。

编辑：还值得指出的是，Twitter正在关闭他们未经身份验证的API请求。您需要使用twitter设置应用程序并使用API密钥发出请求。

JSONP交叉原始错误'No Access-Control-Allow-Origin标头存在'

2 个答案: