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

Question

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

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

element.image.url указывает на URL, как: /rest_api/img/12345678,

Это работает нормально, изображения отображаются.

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

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

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

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

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

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

Answer 1

Как сказано здесь, вы можете использовать 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}}">

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

Answer 2

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

Проблема:

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

Решение:

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

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

Answer 3

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

Например:

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

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

Answer 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)
    }
  ])

И по вашему мнению,

<img ng-src="{{src}}" />

.. кажется, делает свое дело.

Answer 5

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

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