在JavaScript中添加HTTP标头以请求图像

问题描述：

我有一个基于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.

我知道如何在服务器端执行此操作，但如何在angular或javascript中为图像请求添加HTTP标头？对于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.

你需要：

创建一个指令这可以在你的< img /> 标签上，也可以创建它。

让该指令使用 $ http 服务请求图像（从而利用上面的http拦截器）。为此，您将不得不检查扩展并设置正确的内容类型标题，例如： $ http（{url：'images / foo.jpg'，headers：{'content-输入'：'image / jpeg'}）。然后（...）

当你得到答案时，你将不得不采取原始的base64数据并将image元素的 src 属性设置为数据src，如下所示：< img src =data：image / jpeg; base64， 9hsjadf9ha9s8dfh ... asdfasfd/> 。

Create a directive that is either on your <img/> tag, or creates it.
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(...)
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标头以请求图像

在Angular 1.2.X中

In Angular 1.2.X

在Angular 1.0.X

相关推荐