JSONP cross origin error 'No Access-Control-Allow-Origin header is present'

Question

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 Access-Control-Allow-Origin header must be set on the server. In this case, the server belongs to Twitter. [Read more here](http://stackoverflow.com/questions/10143093/origin-is-not-allowed-by-access-control-allow-origin) — Raul Rene, Dec 11 '13 at 12:06
@Paul Rene So this is not something that would be automatically configured by them? Being a public API i thought that this would have been handled by them? — Corey, Dec 11 '13 at 12:09
@Corey It is by design. They don't want unauthenticated requests to their API any more. They want you to use an API key, and a server to make requests. — Munim, Dec 11 '13 at 12:10

score 18 · Accepted Answer · answered Dec 11 '13 at 12:15

18

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

answered Dec 11 '13 at 12:15

Arun P Johny

384,651
66
527
531

1

@RobW `t` and `T`... the key is case sensitive – Arun P Johny Dec 11 '13 at 12:17
@RobW not really see http://jsfiddle.net/arunpjohny/Beryp/3/ - it fails, but if you are using $.getJSON() it will work http://jsfiddle.net/arunpjohny/Beryp/4/ – Arun P Johny Dec 11 '13 at 12:20

score 0 · Answer 2 · answered Dec 11 '13 at 12:08

0

The header is supposed to be set on Twitter's servers when they respond. If it is not available, then it means you cannot access this resource using AJAX from anywhere outside their own domain.
Hence, you can't use their API from javascript on the browser. You have have your own server set up which acts as an intermediate resource to communicate with Twitter API.

Edit: Also worth pointing out at this point that twitter is closing their unauthenticated API requests. You need to setup an app with twitter and use the API key to make requests.

answered Dec 11 '13 at 12:08

Munim

6,310
2
35
44

Okay, then how does accessing it directly through the browser succeed, does that mean `Access-Control-Allow-Origin` is set to `*` or does the server handle this request differently? Im not referring to Twitters API for this by the way. – Corey Dec 11 '13 at 12:16
1

@Corey Yes, opening the URL directly in the browser doesn't honor the `Access-Control-Allow-Origin` header, the server handles it differently. Twitter has in their schedule to stop unauthenticated requests such as your example.. I am not sure if it is already done or not. But the principle (and my answer) is the same for all APIs. – Munim Dec 11 '13 at 12:19

JSONP cross origin error 'No Access-Control-Allow-Origin header is present'

2 Answers2

Linked