Response 200 OK but Jquery shows error?

Question

I am stuck in kind of a weird problem where I am trying to make a JSONP request to the Open Weather history API to get the weather information for the previous years on the a particular date.

fetchHistoryUrl = 'http://78.46.48.103/data/3.0/days?day=0622&mode=list&lat=39.77476949&lon=-100.1953125';
$.ajax({
    method: 'get',
    url: fetchHistoryUrl,
    success: function(response){
        console.log(response);
    },
    error   : function (jqXHR, textStatus, errorThrown) {
        if (typeof console == 'object' && typeof console.log == 'function') {
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        }
    }
});

This gives me the CORS issue.

So I add:

dataType: 'jsonp',

But then I get an error saying "parsererror" which means it cannot parse the response as valid JSON I guess. The response code is 200 OK though.

So if I don't make it a jsonp request I have the CORS problem, but if I do, I get a parse error. How do I go around this problem?

Edit

When I include dataType: 'jsonp',

Object { readyState: 4, getResponseHeader: .ajax/v.getResponseHeader(), getAllResponseHeaders: .ajax/v.getAllResponseHeaders(), setRequestHeader: .ajax/v.setRequestHeader(), overrideMimeType: .ajax/v.overrideMimeType(), statusCode: .ajax/v.statusCode(), abort: .ajax/v.abort(), state: .Deferred/d.state(), always: .Deferred/d.always(), then: .Deferred/d.then(), 10 more… } jquery.min.js line 2 > eval:117:7
"parsererror" jquery.min.js line 2 > eval:118:7
Error: jQuery21102812510521974031_1434973061927 was not called
Stack trace:
.error@http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:1821
b.converters["script json"]@http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:4:16291
vc@http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:4:7397
x@http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:4:10802
.send/c@http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:4:15583
n.event.dispatch@http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:3:6352
n.event.add/r.handle@http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:3:3162

When I don't include it:

Object { readyState: 0, getResponseHeader: .ajax/v.getResponseHeader(), getAllResponseHeaders: .ajax/v.getAllResponseHeaders(), setRequestHeader: .ajax/v.setRequestHeader(), overrideMimeType: .ajax/v.overrideMimeType(), statusCode: .ajax/v.statusCode(), abort: .ajax/v.abort(), state: .Deferred/d.state(), always: .Deferred/d.always(), then: .Deferred/d.then(), 10 more… } jquery.min.js line 2 > eval:117:7
"error" jquery.min.js line 2 > eval:118:7
"" jquery.min.js line 2 > eval:119:7
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://78.46.48.103/data/3.0/days?day=0622&mode=list&lat=39.77476949&lon=-100.1953125. (Reason: missing token 'x-csrf-token' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel). <unknown>
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://78.46.48.103/data/3.0/days?day=0622&mode=list&lat=39.77476949&lon=-100.1953125. (Reason: CORS request failed).

The server must support JSONP. Does it? What does the response look like? — JAAulde, Jun 22 '15 at 11:26
Then why isn't it working for me? Is it because I am on localhost? Can that be a problem? — Rohan, Jun 22 '15 at 11:32
Are you trying to run this from a local file that is accessed via `file://`? — lshettyl, Jun 22 '15 at 11:33
the server must allow CORS , if you use php try to change the header as mentioned here : http://stackoverflow.com/a/5671316/2933014 — Bilel Harrabi, Jun 22 '15 at 11:35
@Bilel - This is a public API, not the OPs. You can test the URL, it works. — Kobi, Jun 22 '15 at 11:37
Your code is working without any CORS issue for me. Are you sure what you got was a CORS error? What did you observe? — light, Jun 22 '15 at 11:41
I'm getting the same success as @light. Could you post the CORS error you're receiving also please. — JBux, Jun 22 '15 at 11:42
Did you provide a callback in the request url like "?callback=myHandler" ? — Roumelis George, Jun 22 '15 at 11:49
@RoumelisGeorge: Jquery does that automatically for me when I specify the `dataType` as `jsonp` — Rohan, Jun 22 '15 at 11:50
@RoumelisGeorge - jQuery does that automatically. The url is public, you can test it yourself: http://78.46.48.103/data/3.0/days?day=0622&mode=list&lat=39.77476949&lon=-100.1953125&callback=nope — Kobi, Jun 22 '15 at 11:51
Seems `3.0` - is a beta and it does't support JSONP. `2.5` works - http://78.46.48.103/data/2.5/weather?q=London,uk&callback=test — Denys Denysiuk, Jun 22 '15 at 11:57

Quentin · Accepted Answer · 2015-06-22T12:35:02.643

The code you've supplied, by itself, works fine.

It breaks if you try to force the use of JSONP because the server you are making the request to doesn't support that. It does support CORS (which is the modern replacement for JSONP), and you don't need to do anything special to make use of that.

Your error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://78.46.48.103/data/3.0/days?day=0622&mode=list&lat=39.77476949&lon=-100.1953125. (Reason: missing token 'x-csrf-token' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).

means that you are adding a non-standard header which requires special permission (which could be set via CORS) from the site you are making the request to if you want to include it in a cross-origin request.

It almost certainly comes from some other code in the page which is adding a token as part of a general defense against Cross-Site Request Forgery attacks to all your Ajax requests.

You need to limit it so it only applies to requests you make to your own site.

score -1 · Answer 2 · answered Jun 22 '15 at 11:30

-1

if you are having CORS issue the requested server should grant you to query CORS.

answered Jun 22 '15 at 11:30

ibrahimbayer

262
1
9

2

It is granting it. It is a third party API which is queried publicly. – Rohan Jun 22 '15 at 11:32
i ran and it worked for me? i have received the response. – ibrahimbayer Jun 22 '15 at 11:36
@ibrahimbayer - me too. You should delete your answer - it doesn't look like this is the problem. – Kobi Jun 22 '15 at 11:39
1

The URL supplied in the question can be inspected and it shows that basic CORS permissions are granted. – Quentin Jun 22 '15 at 11:54

score -1 · Answer 3 · answered Jun 22 '15 at 11:52

The JSONP has become de facto method to overcome same origin policy restrictions and it is supported by major data providers (Facebook, Twitter, Google, Yahoo, etc.). In order to be able to use JSONP, the third party server must support it. In other words wrapping JSON data into a function call.

Please remember, that the returned data is plain javascript file. This means that you are running arbitrary javascript code within the scope of your domain with access to all of the user cookies and data in the browser. This introduces a huge security concern. That is why you absolutely must trust the server you are fetching data using JSONP method.

please refer to this link. It provides the further solution for cross domain request.

Response 200 OK but Jquery shows error?

3 Answers3