Question

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

我知道如何在服务器端执行此操作，但如何在angular或javascript中为图像请求添加HTTP标头？对于api请求，我们已经将它添加到服务（$ ressource）并且它可以工作。

Answer 1

在Angular 1.2.X

中

有很多方法可以做到这一点。在Angular 1.2中，我建议使用http interceptor来“清除”传出请求并添加标题。

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

编辑：来自

的内容

为此你需要创建一个指令，它可能会变得奇怪。

你需要：

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

......这样就会变得疯狂。

如果您可以这样做，那么您的服务器无法保护图像，那么您最好。

Answer 2

我们遇到同样的问题，并使用自定义ng-src指令解决它。

基本上是一个secure-src指令，它完全执行ng-src的操作（基本上是一个副本）但是它使用包含本地身份验证头的查询参数扩展了url。

返回资源的服务器代码将更新为不仅检查标头，还检查查询参数。当然，添加到查询参数的令牌可能会稍有不同地进行身份验证。在正常休息请求之后可能有一个时间窗口，其中允许这样的请求等等。因为该URL将保留在浏览器历史记录中。

Answer 3

正如here所述，如果您使用angular-img-http-src，则可以Bower使用bower install --save angular-img-http-src。

如果您查看the code，则会在2016年4月19日URL.createObjectURL使用URL.revokeObjectURL和still draft。所以look if your browser supports it。

要使用它，请将'angular.img'声明为您的应用模块（angular.module('myapp', [..., 'angular.img'])）的依赖关系，然后在HTML中，您可以使用http-src属性<img>标签

例如：<img http-src="{{myDynamicImageUrl}}">

当然，这意味着您已使用$httpProvider.interceptors.push声明interceptor来添加自定义标头，或者您已使用$http.defaults.headers.common.MyHeader = 'some value'; <为每个请求静态设置标头/ p>

Answer 4

来自：http://docs.angularjs.org/api/ngResource/service/ $ resource

的官方文档

<强>用法

$ resource（url，[paramDefaults]，[actions]）;

[...]

操作：散列声明应该扩展的自定义操作   默认的资源操作集。声明应该在。中创建   $ http.config格式：

{action1：{method：？，params：?, isArray：?, header：？，...}，
  action2：{方法：？，params：?, isArray：？，header：？，...}，...}

有关$ http服务的更多信息：

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

Answer 5

正如所指出的那样Here FIrefox支持 httpChannel.setRequestHeader ：

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

在上面的示例代码中，我们有一个名为httpChannel的变量   指向实现nsIHttpChannel的对象。（这个变量可以   已被命名为。）

setRequestHeader方法有3个参数。第一个参数是   HTTP请求标头的名称。第二个参数是值   HTTP请求标头。而就目前而言，只是忽略第三个   参数，只是总是把它弄错。

然而，这似乎仅适用于Firefox（link）

您可以使用Cookie传递值并将其作为Cookie而不是HttpHeader检索，或使用ajax通过自定义标头检索图像。

更多链接：

link1
link2

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

5 个答案:

在Angular 1.2.X

在Angular 1.0.X

编辑：来自