将 JavaScript 中的 HTTP 标头添加到图像请求中 [英] Add HTTP Header in JavaScript to requests for images

问题描述

我有一个基于 angularjs 的 JS/HTML5 项目，我使用在 http 标头中设置的授权令牌来保护 api.现在我还想保护从服务器访问图像.

I have a JS/HTML5 Project based on angularjs where I protect the api with an authorization token set in the http header. Now I also want to protect the access to images from the server.

我知道如何在服务器端执行此操作，但是如何将 HTTP 标头添加到 angular 或 javascript 中的图像请求?对于 api 请求，我们已经将其添加到服务 ($ressource) 中并且可以正常工作.

I know how to do it on the server side, but how can I add HTTP Headers to image requests in angular or javascript? For api request we have already added it to the services ($ressource) and it works.

推荐答案

在 Angular 1.2.X 中

有很多方法可以做到这一点.在 Angular 1.2 中，我建议使用 http 拦截器 来清理"传出请求并添加标头.

In Angular 1.2.X

There are more than a few ways to do this. In Angular 1.2, I recommend using an http interceptor to "scrub" outgoing requests and add headers.

// 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

为此，您需要创建一个指令，这可能会变得很奇怪.

For this you'll need to create a directive, and it's probably going to get weird.

您需要:

1. 在您的 <img/> 标签上创建一个指令，或者创建它.
2. 让该指令使用 $http 服务来请求图像(从而利用上述 http 拦截器).为此，您将不得不检查扩展并设置正确的内容类型标头，例如: $http({ url: 'images/foo.jpg', headers: { 'content-type':'image/jpeg' }).then(...)
3. 当您收到响应时，您必须获取原始 base64 数据并将图像元素的 src 属性设置为数据 src，如下所示:<img src="data:image/jpeg;base64,9hsjadf9ha9s8dfh...asdfasfd"/>.

1. Create a directive that is either on your <img/> tag, or creates it.
2. Have that directive use $http service to request the image (thus leveraging the above http interceptor). For this you're going to have to examine the extension and set the proper content-type header, something like: $http({ url: 'images/foo.jpg', headers: { 'content-type': 'image/jpeg' }).then(...)
3. When you get the response, you'll have to take the raw base64 data and set the src attribute of your image element to a data src like so: <img src="data:image/jpeg;base64,9hsjadf9ha9s8dfh...asdfasfd"/>.

...所以这会变得疯狂.

... so that'll get crazy.

如果你能做到这样你的服务器就不会保护图像，你会更好.

If you can make it so your server doesn't secure the images you're better off.

这篇关于将 JavaScript 中的 HTTP 标头添加到图像请求中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！