Добавить заголовок HTTP в JavaScript для запросов на изображения

Ответ 1

В Angular 1.2.X

Существует несколько способов сделать это. В Angular 1.2 я рекомендую использовать http-перехватчик для "очистки" исходящих запросов и добавления заголовков.

// An interceptor is just a service.
app.factory('myInterceptor', function($q) {
  return {
    // intercept the requests on the way out.
    request: function(config) {
      var myDomain = "http://whatever.com";

      // (optional) if the request is heading to your target domain,
      // THEN add your header, otherwise leave it alone.
      if(config.url.indexOf(myDomain) !== -1) {

        // add the Authorization header (or custom header) here
        config.headers.Authorization = "Token 12309123019238";
      }

      return config;
    }
  }
});

app.config(function($httpProvider) {
  // wire up the interceptor by name in configuration
  $httpProvider.interceptors.push('myInterceptor');
});

В Angular 1.0.X

Если вы используете Angular 1.0.X, вам нужно установить заголовки более глобально в общих заголовках... $http.defaults.headers.common.Authentication

EDIT: для вещей, поступающих из

Для этого вам нужно создать директиву, и, вероятно, это будет странно.

Вам нужно будет:

• Создайте директиву, которая находится либо на вашем теге <img/>, либо создает его.
• Попросите эту директиву использовать службу $http для запроса изображения (таким образом, используя вышеперечисленный http-перехватчик). Для этого вам нужно будет изучить расширение и установить правильный заголовок типа контента, например: $http({ url: 'images/foo.jpg', headers: { 'content-type': 'image/jpeg' }).then(...)
• Когда вы получите ответ, вам придется взять необработанные данные base64 и установить атрибут src вашего элемента изображения в src данных следующим образом: <img src="data:image/jpeg;base64,9hsjadf9ha9s8dfh...asdfasfd"/>.

... так что сойдет с ума.

Если вы можете сделать так, чтобы ваш сервер не защищал изображения, вам было бы лучше.

Ответ 2

мы имеем ту же проблему и решаем ее с помощью настраиваемой директивы ng-src.

в основном директива secure-src, которая делает именно то, что делает ng-src (его копия в основном), но она расширяет URL с параметром запроса, который включает локальный заголовок аутентификации.

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

Ответ 3

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

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

Ответ 4

Из официальной документации по адресу: http://docs.angularjs.org/api/ngResource/service/ $resource

Использование

$resource (url, [paramDefaults], [действия]);

[...]

действия: хэш с объявлением пользовательских действий, которые должны расширять набор действий по умолчанию. Декларация должна быть создана в формат $http.config:

{action1: {method:?, params:?, isArray:?, headers:?,...},
action2: {method:?, params:?, isArray:?, headers:?,...},...}

Подробнее о сервисе $http:

http://docs.angularjs.org/api/ng/service/ $http # usage_parameters

Ответ 5

Как указано здесь FIrefox поддерживает httpChannel.setRequestHeader:

// adds "X-Hello: World" header to the request
httpChannel.setRequestHeader("X-Hello", "World", false);

В приведенном выше примере кода есть переменная с именем httpChannel, которая указывает на объект, реализующий nsIHttpChannel. (Эта переменная могла были названы что угодно, хотя.)

Метод setRequestHeader принимает 3 параметра. Первый параметр имя заголовка HTTP-запроса. Второй параметр - значение заголовка HTTP-запроса. И пока, просто проигнорируйте третий параметр, и просто всегда делайте его ложным.

Однако это похоже только на Firefox (ссылка)

Вы можете использовать Cookies для передачи значения и получить его в качестве файла cookie вместо HttpHeader или использовать ajax для получения изображения с помощью настраиваемого заголовка.

Другие ссылки:

• link1
• link2