JSONP跨起源错误“没有访问控制 - 允许 - 产地标头是present” [英] JSONP cross origin error 'No Access-Control-Allow-Origin header is present'

问题描述

我使用Ajax使用他们的API来从Twitter获取数据。我想使用JSONP，从我所看到和理解，我认为我做的一切权利（显然不是虽然）。

 ＆LT;脚本SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js＆GT; ＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
    $（文件）。就绪（函数（）{
        $阿贾克斯（{
            键入：GET，
            数据类型：JSONP，
            数据： {}，
            跨域：'真'，
            网址：http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=？，
            错误：函数（textStatus，errorThrown）{
                警报（错误）;
            }，
            成功：函数（MSG）{
                执行console.log（味精）;
            }
        }）;
    }）;
＆LT; / SCRIPT＆GT;
 

以上code产生两个Chrome和Firefox的错误 XMLHtt prequest无法加载<一个href="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=">http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=?.没有访问控制 - 允许 - 原产地标头的请求的资源present。原产地'空'，因此没有允许访问。

这是我的理解我认为这具有＆功放;回调= 并具有设置为 JSONP 的类型会允许这种成功。更重要的是，我可以看到提琴手它只是没有被脚本处理返回的JSON对象。我曾尝试多种API的使用了同样的问题发生。

时输入到地址栏

一个这样的API也适用。

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

我也尝试？回调？但无济于事。

任何想法将真棒，谢谢。

解决方案

该资源支持JSONP，所以没有必要CORS ...问题是数据类型：JSONP应该是数据类型：JSONP

  $（文件）。就绪（函数（）{
    $阿贾克斯（{
        键入：GET，
        数据类型：JSONP，
        数据： {}，
        网址：http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=？，
        错误：函数（jqXHR，textStatus，errorThrown）{
            执行console.log（jqXHR）
        }，
        成功：函数（MSG）{
            执行console.log（味精）;
        }
    }）;
}）;
 

演示：小提琴

I am using Ajax to get data from twitter using their API. I am trying to use jsonp and from what i can see and understand I think I am doing everything right (obviously not though).

<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>

The above code generates an error in both Chrome and Firefox XMLHttpRequest cannot load http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=?. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

From my understanding i thought that having the &callback=? and having the type set to jsonp would allow this to succeed. What's more is that I can see the JSON object being returned in fiddler it is just not being dealt with by the script. I have tried multiple API's with the same issue occurring.

One such API also works when entered into the address bar.

So I after extensive searching and looking do i need to some how set the origin to *? I thought this was more a server side issue?

I have also tried ?callback? but to no avail.

Any ideas would be awesome thanks.

解决方案

The said resource supports jsonp, so there is no need for CORS... the problem is datatype: 'jsonp' it should be 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);
        }
    });
});

Demo: Fiddle

这篇关于JSONP跨起源错误“没有访问控制 - 允许 - 产地标头是present”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！