2016-11-29 115 views
2

我只是想把我的头围绕JSON/JSONP和跨域问题。为什么JSONP在这里不需要?

继承人我找到了一个例子。

$(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

是否有人可以解释为什么,在这个例子中有没有跨域问题(使用JSONP的人没有必要)由于数据来自树

域...并显示在codepen.io ....这不是一个跨域?

+1

大概是因为来自'teamtreehouse.com'域的响应包含允许请求来自所需域的CORS头文件 –

+1

还请注意引用JSON和JSONP不可互换。你必须使用端点给你的东西。 –

回答

1

这里是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 ... 

通知Access-Control-Allow-Origin: *。这意味着他们允许任何域发送XHR请求。因此,没有CORS错误。

+0

感谢Piyush。所以任何网站都可以配置(在他们的最后)是否允许CORS?我没有意识到。干杯 – swisstony