2016-04-24 152 views
0

首次發佈到stackoverflow。403禁止對JSONP請求的響應

我只是想使用jquery從json url獲取數據。 第一個問題是交叉原點請求塊,即使是用來阻止這個問題的庫,比如ajax cross origin js(抱歉不提供這個鏈接,我太新了,沒有超過2個鏈接),我仍然沒有運氣,相同的交叉原點錯誤。

所以我搬到了JSONP。

url = "http://take-home-test.herokuapp.com/api/v1/works.json?callback=?" 
$.ajaxSetup({ dataType: "jsonp" }); 
$.getJSON(url, function(json) { 
    console.log(data); 
}); 

(用於JSONP請求的AJAX語法我嘗試過)

現在我可以將數據返回背面的網絡選項卡上看到,但狀態爲403禁止。 pic of the response in the network tab of chrome

我正在使用http-server,您可以使用npm進行安裝,以避免chrome出現json MIME類型的問題。 這個類似的堆棧溢出答案說,我需要爲我的框架集成jsonp支持,但他們指的是用於ruby的sinatra。 Why Does JSONP Call Return Forbidden 403 Yet URL can be accessed in a browser
所以我嘗試了npmjs jsonpclient,仍然得到了禁止的響應。

任何想法?這花了我一天的時間。

+1

該資源是否需要某種身份驗證? – nnnnnn

+0

我很懷疑。這個API是作爲公司帶回家採訪測試的一部分提供的。 – Sally

+0

我相信這是API端點上的Access-Control-Allow-Origin標題的問題。 –

回答

0

問題:服務器(http://take-home-test.herokuapp.com)沒有設置「Access-Control-Allow-Origin」標頭。如果您有權訪問服務器,請使用'--cors'選項啓動它。又名:node bin/http-server --cors ...這將通過Access-Control-Allow-Origin標題啓用CORS,並應解決您的問題。

如果您無權訪問服務器。這是一個快速解決方案:通過http://cors.io代理您的請求。見下文。

url = 'http://take-home-test.herokuapp.com/api/v1/works.json?callback=?'; 
new_url = "http://cors.io/?u=" + encodeURIComponent(url); 

$.ajaxSetup({ dataType: "jsonp" }); 
$.getJSON(new_url, function(json) { 
    console.log(json); 
}); 

的jsfiddle:http://jsfiddle.net/davemeas/4rt3s7ta/1/(注:必須將jQuery添加到小提琴:))

0

這是我找到工作的代碼最簡單的版本,由於戴夫尺寸:

url = http://take-home-test.herokuapp.com/api/v1/works.json" 
new_url = "http://crossorigin.me/" + url; 
$.getJSON(new_url, function(json) { 
console.log(json); 
});