響應200可以，但是Jquery顯示錯誤？

Question

我陷入了一個奇怪的問題，我試圖向開放天氣歷史API發出JSONP請求，以獲取特定日期前幾年的天氣信息。

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);
        }
    }
});

這給了我CORS問題。

所以我添加：

dataType: 'jsonp',

但是然后我得到一個錯誤，說"parsererror" ，這意味着它不能將響應解析為有效的JSON。 響應代碼是200 OK。

因此，如果我不將其jsonp請求，則會遇到CORS問題，但如果這樣做，則會出現解析錯誤。 我該如何解決這個問題？

編輯

當我包含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

當我不包括它時：

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

您提供的代碼本身可以正常工作 。

如果您嘗試強制使用JSONP，則會中斷，因為您向其發出請求的服務器不支持JSONP。 它確實支持CORS（這是JSONP的現代替代品），並且您不需要做任何特殊的事情就可以使用它。

您的錯誤：

跨域請求被阻止：相同來源策略不允許讀取位於http://78.46.48.103/data/3.0/days?day=0622&mode=list&lat=39.77476949&lon=-100.1953125.的遠程資源http://78.46.48.103/data/3.0/days?day=0622&mode=list&lat=39.77476949&lon=-100.1953125. （原因：CORS預檢通道中的CORS標頭“ Access-Control-Allow-Headers”中缺少令牌“ x-csrf-token”）。

意味着您要添加非標准標頭，該標頭需要特殊的權限（可以通過CORS設置），如果您想將其包含在跨域請求中，則該標頭來自您發出請求的網站。

幾乎可以肯定，它來自頁面中的其他一些代碼，該代碼在對所有 Ajax請求的跨站點請求偽造攻擊的常規防御中添加了令牌。

您需要對其進行限制，使其僅適用於您對自己的網站提出的請求。

Answer 2

如果您正在發出CORS，則請求的服務器應允許您查詢CORS。

Answer 3

JSONP已經成為克服相同來源策略限制的事實上的方法，並且主要數據提供商（Facebook，Twitter，Google，Yahoo等）都支持它。 為了能夠使用JSONP，第三方服務器必須支持它。 換句話說，將JSON數據包裝到函數調用中。

請記住，返回的數據是純JavaScript文件。 這意味着您正在域范圍內運行任意javascript代碼，並可以訪問瀏覽器中的所有用戶cookie和數據。 這帶來了巨大的安全隱患。 這就是為什么您絕對必須信任使用JSONP方法獲取數據的服務器。

請參考此鏈接 。 它為跨域請求提供了進一步的解決方案。