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

Answer 1

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.

Answer 2

如果您正在发出CORS，则请求的服务器应允许您查询CORS。

Answer 3

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.