Angular http: как вызвать изображения с пользовательскими заголовками?

В представлении html изображения отображаются следующим образом:

<img ng-src="{{element.image.url}}">

element.image.url указывает на URL-адрес, например: /rest_api/img/12345678.

Работает отлично, изображения отображаются.

Теперь я добавляю аутентификацию:

До того, как пользователь будет аутентифицирован, каждый ресурс отвечает также ошибкой http 401, изображениями. Когда аутентификация завершается успешно, маркер помещается в пользовательские заголовки и отправляется с любыми $http-запросами, что позволяет получить доступ к ресурсам:

$http.defaults.headers.common['Authorization'] = token;

Это отлично работает для файлов Json, загруженных $resource. Но прямые ссылки на изображения по-прежнему 401 после аутентификации.

Как вызвать изображения с настраиваемыми заголовками?

Или любые советы о том, как я должен это делать.

Ответ 1

Для этого существует простой ответ. Вы должны использовать: angular-img-http-src.

Проблема:

Вы использовали аутентификацию на основе токенов, и вам нужно обслуживать изображения из защищенных маршруты.

Решение:

Используйте http-src вместо ng-src, и он будет извлекать изображения, используя $http service - значение заголовков авторизации, добавленных через перехватчики будет присутствовать, а затем построить Blob и установить src в объектURL.

Он отлично работает в моем проекте.

Ответ 2

Как сказано здесь, вы можете использовать angular-img-http-src (bower install --save angular-img-http-srcесли вы используете Bower).

Если вы посмотрите код, он использует URL.createObjectURL и URL.revokeObjectURL, которые еще черновик 19 апреля 2016. Итак, посмотрите, поддерживает ли ваш браузер.

Чтобы использовать его, объявите 'angular.img' как зависимость от вашего модуля приложения (angular.module('myapp', [..., 'angular.img'])), а затем в своем HTML вы можете использовать атрибут http-src для тега <img>.

В вашем примере это будет: <img http-src="{{element.image.url}}">

Конечно, это означает, что вы объявили interceptor, используя $httpProvider.interceptors.push, чтобы добавить свой собственный заголовок или что вы установите статический заголовок для каждого запроса, используя $http.defaults.headers.common.MyHeader = 'some value';

Ответ 3

Я столкнулся с той же проблемой. Лучшее решение, которое я нашел, это передать токен авторизации в качестве параметра запроса.

Например:

<img src="http://myhost.com/image/path?accessToken=123456789" >

Таким образом вы можете защитить эти изображения только для своих пользователей REST.

Ответ 4

Рассмотрим URL-адрес http://foo.com/bar.png

В вашем контроллере

angular.module('foo')
  .controller('fooCtrl', ['$sce',
    function($sce) {
      $scope.dataSrc = "http://foo.com/bar.png"
      $scope.src = $sce.trustAsResourceUrl($scope.dataSrc)
    }
  ])

Ответ 5

Насколько я знаю, невозможно передать дополнительные заголовки с запросами на ресурсы (скрипты, изображения, мультимедиа, файлы CSS, которые браузер загружает при рендеринге страницы). Все это контролируется браузером. Только при выполнении запроса XHR (AJAX) вы можете изменять заголовки.

Я бы предложил посмотреть на аутентификацию на стороне сервера и посмотреть, есть ли там решение.