$.ajax returns data from external api but $.getJSON throws error

Question

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?

Answer 1

You cannot set http headers with getJSON, your API seems to require it to allows CORS. While you can use ajaxSetup to set the header, I wouldn't recommend it as all subsequent ajax calls will use those settings.

jQuery.ajaxSetup({headers: {'X-API-Key': apiKey }});
$.getJSON(requestURL, function(data){
    console.log(data);
});