在 AngularJS 中动态加载图像时禁止获取 403 [英] Getting 403 forbidden when dynamically loading images in AngularJS

问题描述

我正在从我的 api 加载 json 数据，其中包含指向我域外图像的 url.我过去做过这个，不是用 Angular，我从来没有见过这个问题...

I am loading json data from my api that contains urls to images outside of my domain. I've done this in the past, not with Angular, and I've never seen this problem...

在我的 fiddle 中，当我单击搜索"时会出现两个图像，但它们都抛出 403禁止，请勿加载.

In my fiddle when I click 'Search' two images appear but they are both throwing a 403 forbidden and do not load.

我不明白为什么会这样.有什么想法吗?

I can't figure out why this is happening. Any ideas?

var app = angular.module('app', []);

function HomeController($scope) {
    $scope.search = function() {
        $scope.movies = [ 
            { Title: 'The Matrix', Poster: 'http://ia.media-imdb.com/images/M/MV5BMTU4NTczODkwM15BMl5BanBnXkFtZTcwMzEyMTIyMw@@._V1._SY317_.jpg' },
            { Title: 'The Matrix Reloaded', Poster: 'http://ia.media-imdb.com/images/M/MV5BMTg1NTkxOTk0MV5BMl5BanBnXkFtZTYwODc4MTc4._V1._SY317_.jpg' }
        ];
    };
}

推荐答案

似乎 imdb 正在检查引用者，因此不允许其他方直接在他们的网站上嵌入他们的图像.如果您尝试使用来自其他域的图像，它会起作用:http://jsfiddle.net/PZJKZ/2/

It seems that imdb is checking the referer so other parties are not allowed to embeded their images directly on their website. If you try with images from other domains, it works: http://jsfiddle.net/PZJKZ/2/

var app = angular.module('app', []);

function HomeController($scope) {
    $scope.search = function() {
        $scope.movies = [ 
            { Title: 'The Matrix', Poster: 'http://dartr.com/wp-content/uploads/2011/10/javascript-logo.png' },
            { Title: 'The Matrix Reloaded', Poster: 'http://wpmu.org/wp-content/uploads/2010/04/jquery-logo1.png' }
        ];
    };
}

这篇关于在 AngularJS 中动态加载图像时禁止获取 403的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！