I am having trouble using the .getJSON JQuery method to return data from an external API*, but the .ajax method works fine.
using this code with .ajax works for me:
var apiKey = 'myKey',
requestURL = 'https://api.propublica.org/congress/v1/115/senate/members.json';
$.ajax({
url: requestURL,
type: "GET",
dataType: 'json',
headers: {'X-API-Key': apiKey }
}).done(function(data){
console.log(data)
});
Using $.getJSON does not work for me:
var apiKey = 'myKey',
requestURL = 'https://api.propublica.org/congress/v1/115/senate/members.json';
$.getJSON(requestURL + '?callback=?', {
'X-API-Key': apiKey
}, function(data){
console.log(data);
});
The only difference is I added "?callback=?" to the url as the documentation and several posts/tutorials say to so that it will return JSONP. I have tried changing the url to see if I can fix it and after several hours I cannot get it to work.
The error in the console that I get is this:
GET https://api.propublica.org/congress/v1/115/senate/members.json?callback=jQuery110203399070889473792_1523562076495&X-API-Key=myKey&_=1523562076496 net::ERR_ABORTED
If I take the "?callback=?" off of the url for the getJSON example, I get the message above and also this additional error message:
Failed to load https://api.propublica.org/congress/v1/115/senate/members.json?X-API-Key=myKey: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:81' is therefore not allowed access. The response had HTTP status code 401.
I am confused as to why this is not working since getJSON is supposed to be shorthand for the exact .ajax call I have above JQuery getJSON Documentation .
Do you know why .getJSON will not work but .ajax will?