jQuery 调用后尝试使用 Tumblr 图像时出现 403 禁止响应答案

【问题标题】：403 forbidden response when attempting to use Tumblr images after jQuery calljQuery 调用后尝试使用 Tumblr 图像时出现 403 禁止响应
【发布时间】：2013-09-26 09:32:06
【问题描述】：

所以我正在尝试构建一个 tumblr 站点，该站点将能够自动分页、与 colorbox 集成并通过 jQuery.ajax 加载标记的元素并将它们加载到 Dom。

我得到了 jsonp 响应，我解析它就好了，然后当我附加它时，我得到一个控制台日志，告诉我这个文件是被禁止的。我想我需要将我的 api 密钥与图像请求一起传递，但我不知道该怎么做。

我的代码如下。

$.ajax({
  url: 'http://api.tumblr.com/v2/blog/ryansimmonsiscool.tumblr.com/posts/photo?api_key=myApikey&limit=6',
  dataType: 'jsonp',
  success: function(results) {
    console.log(results);
    var posts = results.response.posts;
    $.each(posts, function(i, posts) {
      //console.log(this.photos);

      var photos = this.photos;

      $.each(photos, function(i, photos) {
        console.log(this.alt_sizes[3].url);
        var thumb = '<img src=' + this.alt_sizes[3].url + '/>';
        $('#contSlug').append(thumb);
        console.log(this.original_size.url);
        var fullres = '<img src=' + this.original_size.url + '/>';
        $('#contSlug').append(fullres);
      });
    });
  }
});

编辑：我还尝试定义我的 $.ajaxSetup 以包含我的 api_key 以便在附加图像并且客户端向服务器询问它使用 get 方法中的 api_key 检索的数据时（下面的代码）但我我仍然收到 403 和损坏的链接。

$.ajaxSetup({
  data: {
    api_key:'example-api-key'
  }
});

【问题讨论】：

标签： ajax jquery tumblr http-status-code-403

【解决方案1】：

您可以将请求类型和请求中的数据设置为变量type（根据需要设置为'get'或'post'）。然后创建一个data 对象并在该对象中设置请求变量。这将使用type 中指定的方法传递给服务器。

$.ajax({
type: "get",
data: {
        api_key:myAPIKeyGoesHere,
        limit:6
},
url:'http://api.tumblr.com/v2/blog/ryansimmonsiscool.tumblr.com/posts/photo',
cache: false,
dataType: 'jsonp',
success: function(results){
    console.log(results);
    var posts = results.response.posts;
    $.each(posts, function (i, posts){

        //console.log(this.photos);

        var photos = this.photos;

        $.each(photos, function (i, photos) {
            console.log(this.alt_sizes[3].url)
            var thumb = "<img src="+this.alt_sizes[3].url+"/>";
            $("#contSlug").append(thumb);
            console.log(this.original_size.url)
            var fullres = "<img src="+this.original_size.url+"/>";
            $("#contSlug").append(fullres);
            })
        })
}
 });

希望这会有所帮助。

【讨论】：

这是更好的语法，但我仍然有一个问题，当我附加 DOM 并且客户端通过 img url 请求实际图像数据时，它会向控制台返回 403。我将尝试使用 api_key 定义 ajax 默认值。
我不是 100% 确定，但 this 内的 $.each 不是指 jQuery 创建的对象，而不是带有 alt_size[3] 属性的对象？

【解决方案2】：

我遇到了同样的问题......不确定是否同样的问题，但在我的情况下，图像标签中的结尾斜杠是什么导致它关闭，所以像这样更改上面的内容：

var fullres = "<img src="+this.original_size.url+">";

我使用 underscore.js 模板做类似的事情，结果是这样的：

<img src=<%= post.photos[0].alt_sizes[0].url %>>

除此之外，我们的代码与使用 ajax 等的代码相同。

【讨论】：