JSONP 跨源错误“不存在 Access-Control-Allow-Origin 标头”

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 cannot load http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=?。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'null'。

据我了解，我认为拥有&callback=? 并将类型设置为jsonp 可以让这成功。更重要的是，我可以看到在提琴手中返回的 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 密钥发出请求。