CODEWITHSUNDEEP
jqueryjson
swisstony
swisstony

Reputation: 1715

why is JSONP not need here?

Im just trying to wrap my head round JSON/JSONP and cross domain issues.

Heres an example I found. 

$(document).ready(function() {
  var user = "jamesbarnett"; //treehouse username

  /* get treehouse profile info via JSON */
  $.getJSON("https://teamtreehouse.com/" + user + ".json", function(data) { 
    console.log(data);// intialize list
    $("#badges").html('<ol>');
    var output = "";
    /* loop through the JSON, parse out badge name & icon
    wrap it in some HTML. */    
    for (var i in data.badges) {
        output += "<li>";
        output +="<figure>";
        output +="<figcaption>" + data.badges[i].name + "</figcaption>";
        output += "<img src = '" + data.badges[i].icon_url + "'/>";
        output+="</figure>";
        output += "</li>";    
    }
    $("#badges ol").append(output); // append li
    $("#badges ol").append('</ol>'); // close list

    /* hide spinner and then output HTML we built in the for loop */
    $(".spinner").hide();
  });
});

https://codepen.io/jamesbarnett/pen/oHsvr

Can someone please explain why, in this example there is no cross domain issues (and the person has not needed to use JSONP)

Since the data comes from Treehouse domain...and is being displayed on codepen.io.... is this not a cross-domain?

Upvotes: 2

Views: 45

Answers (1)

31piy
31piy

Reputation: 23859

Here is a response of curl -v https://teamtreehouse.com/jamesbarnett.json:

< HTTP/1.1 200 OK
... Response truncated for brevity ...
< X-Content-Type-Options: nosniff
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET, OPTIONS
< Access-Control-Max-Age: 1728000
< ETag: W/"497006ef8221ce12b09998c0cdee8153"
< Cache-Control: max-age=0, private, must-revalidate
... Response truncated for brevity ...

Notice Access-Control-Allow-Origin: *. This means that they allow any domain to send XHR request. Hence, no CORS error.

Upvotes: 1

Related Questions