如何使用Angular JS使用Authorization Bearer令牌从服务器获取图像

Question

我正在使用Angular JS通过Authorization: Bearer令牌从服务器获取图像。 我已经看过使用Bearer令牌在JavaScript中加载图像的示例。

我用过这样的代码，

var request = new XMLHttpRequest();
request.open('GET','https://dl.content.com/contentfile.jpg', true);
request.setRequestHeader('Authorization', 'Bearer ' + oauthToken.access_token);
request.responseType = 'arraybuffer';
request.onload = function(e) {
    var data = new Uint8Array(this.response);
    var raw = String.fromCharCode.apply(null, data);
    var base64 = btoa(raw);
    var src = "data:image;base64," + base64;

    document.getElementById("image").src = src;
};

request.send();

工作正常。 但这是用纯JavaScript编写的。 我只想知道是否有使用Angular JS来实现相同功能的等效语法？

我已经尝试使用Angualar JS的$http来做到这一点。 我的代码如下

$http({
            method: 'GET',
            url: file,
            headers: {
                'Authorization': 'Bearer ' + Constants.token
            }
        }).then(function (data) {
            console.log('from backend', data)
        })

但是它给出了以下错误，浏览器被挂起。

错误截图

我不知道为什么会发生错误以及如何解决。

Answer 1

我通常要做的是对我提出的请求使用拦截器。

 $httpProvider.interceptors.push('myInterceptor');

并根据要求和回应使用工厂。

.... .factory('myInterceptor', function() {
return {
    request: function(config) {
        config.headers.Authorization="Bearer "+ myberer
        return config;
    },
    requestError: function(reject) {
      // do something on error
      console.log('request Error')
    },
    response: function(config) {

    },
    responseError: function(reject) {
    }
};

您可以在本文中找到更多信息http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/

或搜索angularJs拦截器