403 Verbotene Antwort auf eine JSONP-Anfrage

Question

Erste Buchung in stackoverflow.

Ich versuche nur, die Daten von einer JSON-URL mit jquery zu erhalten. Das erste Problem war der Cross-Ursprungs-Anfrage-Block, auch mit Bibliotheken, die dieses Problem zu stoppen, wie Ajax Cross Herkunft js (Entschuldigung, diesen Link nicht zu bieten, ich bin zu neu, um mehr als 2 Links hier zu haben), ich hatte immer noch kein Glück, gleichen Kreuzursprungsfehler.

so wechselte ich zu JSONP.

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

(die AJAX-Syntax für eine JSONP Anfrage habe ich versucht, auch)

Jetzt kann ich im Netz Registerkarte sehen, dass die Daten wieder zurückkehren, aber der Status ist 403 verboten.

Ich benutze HTTP-Server, den Sie mit Npm installieren können, um Chrom Probleme mit dem JSON MIME-Typ zu vermeiden. Diese ähnliche Stapelüberlaufantwort sagt, dass ich Jsonpunterstützung für meinen Rahmen integrieren musste, aber sie bezogen sich auf Sinatra für Rubin. Why Does JSONP Call Return Forbidden 403 Yet URL can be accessed in a browser
Also habe ich npmjs jsonpclient ausprobiert und immer noch die verbotene Antwort bekommen.

Irgendwelche Ideen? Das hat mich über einen Tag gebracht.

Answer 1

Das Problem: Der Server (http://take-home-test.herokuapp.com) hat keine 'Access-Control-Allow-Origin'-Header festgelegt. Wenn Sie Zugriff auf den Server haben, starten Sie ihn mit der Option '--cors'. Aka: Knoten bin/http-Server --cors ... Dies wird CORS über die Access-Control-Allow-Origin-Header aktivieren und sollte Ihr Problem lösen.

Wenn Sie keinen Zugriff auf den Server haben. Hier ist eine schnelle Lösung: Proxy Ihre Anfrage über http://cors.io. Siehe unten.

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/ (Anmerkung: Sie jQuery zu dieser Geige :) hinzuzufügen haben)

Answer 2

Dies war die einfachste Version des Codes ich zur Arbeit gefunden, dank Dave Meas:

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