AJAX request to Flickr API returns 0 results, but works with curl/postman

Question

I'm building a single page web app which makes an AJAX request to Flickr (using the Flickr API). When I try the request using curl or postman it works. When I try it from Chrome using AJAX (jQuery), I get a 200 response back with a status of "OK", but always 0 results. If I take the exact same URL (literally copy and paste) into postman/curl I get results. I must be doing something dumb but I can't figure it out.

JavaScript Code:

var photoQueryURL = 'https://api.flickr.com/services/rest/?' + $.param({
    'method': 'flickr.photos.search',
    'api_key': flickrAPIKey,
    'text': title,
    'tags': title,
    'format': 'json',
    'nojsoncallback': '1'
});
// AJAX Query:
$.ajax(photoQueryURL)
    .done(function(data) {
        console.log('Sucessful query.');
        console.log(data);
    })
    .fail(function(err) {
        console.log('Failed query.');
        console.log(err);
    });

AJAX Query:

Request URL:https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=<my-key>&text=Alex%27s%20Pizzeria&tags=Alex%27s%20Pizzeria&format=json&nojsoncallback=1
Request Method:GET
Status Code:200 
Remote Address:69.147.64.33:443
Referrer Policy:no-referrer-when-downgrade
Response Headers
access-control-allow-origin:*
age:2
cache-control:private
content-encoding:gzip
content-length:83
content-type:application/json
date:Sat, 28 Oct 2017 21:59:02 GMT
p3p:policyref="https://policies.yahoo.com/w3c/p3p.xml", CP="CAO DSP COR CUR ADM DEV TAI PSA PSD IVAi IVDi CONi TELo OTPi OUR DELi SAMi OTRi UNRi PUBi IND PHY ONL UNI PUR FIN COM NAV INT DEM CNT STA POL HEA PRE LOC GOV"
server:ATS
status:200
vary:Accept-Encoding
via:http/1.1 fts126.flickr.bf1.yahoo.com (ApacheTrafficServer [cMsSf ]), http/1.1 e22.ycpi.cha.yahoo.com (ApacheTrafficServer [cMsSf ])
x-content-type-options:nosniff
x-frame-options:SAMEORIGIN
x-served-by:www-bm006.flickr.bf1.yahoo.com
Request Headers
:authority:api.flickr.com
:method:GET
:path:/services/rest/?method=flickr.photos.search&api_key=<my-key>&text=Alex%27s%20Pizzeria&tags=Alex%27s%20Pizzeria&format=json&nojsoncallback=1
:scheme:https
accept:application/json, text/javascript, */*; q=0.01
accept-encoding:gzip, deflate, br
accept-language:en-US,en;q=0.9
cache-control:no-cache
origin:null
pragma:no-cache
user-agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.75 Safari/537.36
Query String Parameters
view source
view URL encoded
method:flickr.photos.search
api_key:<my-key>
text:Alex's Pizzeria
tags:Alex's Pizzeria
format:json
nojsoncallback:1

AJAX Response:

{"photos":{"page":1,"pages":0,"perpage":100,"total":"0","photo":[]},"stat":"ok"}

Query with curl:

curl -k "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=<my-key>&text=Alex%27s%20Pizza&tags=Alex%27s%20Pizza&format=json&nojsoncallback=1"

Response (notice 5 results):

{"photos": {"page": 1, "pages": 1, "perpage": 100, "total": "5",
"photo": [{"id":(...)}]},
"stat":"ok"}

Suggestions?

--Jim

Answer 1

Your code is correct. I've made a Flickr Account to reproduce your issue.

I added this code to print the results:

var len = data.photos.photo.length, html = "";
if (len > 0) {
  var i;
  for (i = 0; i < len; i++) {
    html += "<li>";
    html += data.photos.photo[i].title;
    html += "</li>";
  }
  $("#list").html(html);
}

Something like this:

(function() {
  $("#form").on("submit", function(e) {
    var flickrAPIKey = "39417c145483a7fb3ee91c5fe5bc93fe",
      title = $("#txtInput").val();
    var photoQueryURL = 'https://api.flickr.com/services/rest/?' + $.param({
      'method': 'flickr.photos.search',
      'api_key': flickrAPIKey,
      'text': title,
      'tags': title,
      'format': 'json',
      'nojsoncallback': '1'
    });
    // AJAX Query:
    $.ajax(photoQueryURL)
      .done(function(data) {
        console.log('Sucessful query.');
        var len = data.photos.photo.length, html = "";
        if (len > 0) {
          var i;
          for (i = 0; i < len; i++) {
            html += "<li>";
            html += data.photos.photo[i].title;
            html += "</li>";
          }
          $("#list").html(html);
        }
      })
      .fail(function(err) {
        console.log('Failed query.');
        console.log(err);
      });
    e.preventDefault();
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form">
  <label for="txtInput">Input:</label>
  <input id="txtInput" type="text" />
  <button type="submit">Send</button>
  <hr />
  <ul id="list"></ul>
</form>

The Access-Control-Allow-Origin: * header is present.